Проверить URL
В настоящее время я использую Angular 5. Я попытался проверить URL-адрес следующим образом:
HTML:
<div class = "form-group col-sm-6">
<input formControlName = "s_url" type = "url" class = "form-control" id = "kk" placeholder = "url">
<error-display [displayError] = "isValid('s_url')" errMsg = "This field is required!"></error-display>
</div>
В файле validate.ts у меня есть такой шаблон:
s_url: new FormControl('', [
Validators.required,
Validators.pattern("/^(http[s]?://){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/")
]),
Но с шаблоном сообщение об ошибке отображается даже при вводе правильного URL-адреса.
Ответы 6
Вы можете попробовать этот способ, немного изменив и разделив ваше регулярное выражение:
const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
...
Validators.pattern(reg)
По моему собственному опыту, кавычки (") и косые черты (/) иногда могут вызывать проблемы с регулярным выражением при передаче непосредственно в .pattern().
Он не проверяет URL-адреса с помощью параметров запроса, таких как http://demosite.com/#/admin/project/project-details?id=34.
Это не было предметом консультации. Откройте новую тему.
Я рекомендую следовать регулярному выражению, более полному (включая URL-адреса с параметрами запроса) var URL_REGEXP = /^[A-Za-z][A-Za-z\d.+-]*:/*(?:\w+(?::\w+)?@)?[^\s/]+(?::\d+)?(?:/[\w#!:.?+=&%@\-/]*)?$/;, скопированный из исходного кода angularjs (github.com/angular/angular.js/commit/…)
Я просто попробовал случайный URL-адрес из изображений Google, кажется, ваше решение недействительно, например snopes.com/tachyon/2020/03/ss_corona_beer.jpg?resize=865,452
Пример @VictorDias работает и для IP-адресов. Бывший. 102.25.36.24
В зависимости от ваших требований, например, если вы не хотите иметь дело с \ поддерживать RegExp для URL-адреса, вы можете делегировать работу встроенному в браузер средству проверки формы.
Это могло быть реализовано так:
const control: HTMLInputElement = document.createElement("input");
control.type = "url";
control.value = value;
const isValid: boolean = control.checkValidity();
Используйте этот простой подход ..
установить эту библиотеку.
npm install ng2-validation --save
Не забывайте вводить это. В вашем app.module.ts импортируйте это в свой массив импорта
import { CustomFormsModule } from 'ng2-validation'
И в вашем массиве импорта
imports: [BrowserModule, FormsModule, CustomFormsModule],
Затем измените свой код, как показано ниже
<div class = "form-group col-sm-6">
<input formControlName = "s_url" type = "url" class = "form-control" id = "kk" url placeholder = "url">
<div *ngIf = "imageUrl.touched && imageUrl.invalid" >
<div *ngIf = "imageUrl.errors.required"> This field is required!</div>
<div *ngIf = "imageUrl.errors.url"> invalid URL </div>
</div>
</div>
Я думаю, что это регулярное выражение более полное:
const urlRegex = /^(?:http(s)?://)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
this.form = this.fb.group({
s_url: ['', [Validators.required, Validators.pattern(urlRegex)]],
});
Пожалуйста, проверьте образец здесь
Это не работает с символами Юникода, такими как ü и ä, которые в настоящее время поддерживаются в доменных именах.
Вы также можете использовать URL API, который на момент написания этого ответа поддерживался 95%. См. Поддержку браузера здесь
urlValidator: ValidatorFn = (control: AbstractControl) => {
let validUrl = true;
try {
new URL(control.value)
} catch {
validUrl = false;
}
return validUrl ? null : { invalidUrl: true };
}
searchControl = this.fb.control(null, this.urlValidator);
Похоже, что при этом вообще не принимаются во внимание протоколы.
http: eca.com укажите мне действительный URL
@JamesParker Что ты имеешь в виду? Не могли бы вы привести пример того, что вы считаете недействительным URL-адресом, который возвращается как действительный? Спасибо
используйте это регулярное выражение /^(http[s provided?://){0,1}(www.){0,1}[a-zA-Z0-9.- provided+.[a-zA-Z ]{2,5 } [.] {0,1} /
он работает со всеми типами URL
Почему «www». там жестко запрограммированы? Даже URL-адрес этой страницы не содержит www. :-( stackoverflow.com/questions/50508712/validate-an-url
когда вы передаете регулярное выражение в качестве параметра для Validators.pattern (regex), вам необходимо убрать обратную косую черту. В вашем примере это должно выглядеть так: ^ (http [s]?: \\ / \\ /) {0,1} (www \\.) {0,1} [a-zA-Z0 -9 \\. \\ -] + \\. [A- zA-Z] {2,5} [\\.] {0,1} . Регулярное выражение, которое я использую для URL-адресов, выглядит так: Validators.pattern ("^ (https | ftp | http | ftps): \\ / \\ / ([az \\ d _] + \\.)? (([ a-zA-Z \\ d _] + ) (\\. [a-zA-Z] {2,6})) (\\ / [a-zA-Z \\ d _ \\% \ \ - = \\ +] +) * (\\?)? ([A-z AZ \\ d = _ \\ + \\% \\ - & \\ {\\} \\ :] +)? ")