angular - 验证 URL

标签 angular forms typescript

目前,我正在使用 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 也会显示错误消息。

最佳答案

您可以通过稍微修改和分隔您的正则表达式来尝试这种方式:

const reg = '(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?';
...
Validators.pattern(reg)

根据我自己的经验,引号 (") 和斜杠 (/) 有时会在直接传递到 .pattern()< 时导致正则表达式出现问题


这是一个有效的 Demo

关于angular - 验证 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50508712/

相关文章:

对动态创建的文本框进行 javascript 验证

django:表单 - 覆盖时间输入小部件

javascript - typescript + Angular : variable changing context

javascript - 使用 axios 对拦截器进行单元测试会抛出错误

javascript - 切换子组件时如何隐藏父组件

javascript - 将 Observable 的输出从对象转换为数组

angular - 单元测试 valueChanges 可观察管道

python - Django:表单验证接受首字母大写的字符串

javascript - 使用 ES6 或 TypeScript 导入多个 'export' 的更好方法

css - 从 html 属性绑定(bind)设置 div 背景图像