使用 AngularJS 和 HTML 5 验证 URL

Posted 2023-03-05

【中文标题】使用 AngularJS 和 HTML 5 验证 URL

【英文标题】：Validate URL with AngularJS and HTML 5

【发布时间】：2017-09-06 13:48:00

【问题描述】：

大家早上好：

看起来像一个非常常见的问题，但在谷歌搜索几个小时后，我无法弄清楚：如何验证包含 www 的 URL 而没有 http。

这就是我所做的：

使用了输入类型url：不接受www.google.com； 将输入类型更改为text 并使用ng-pattern：我仍然得到www.google.com 无效； 更改了不同的正则表达式，但仍然无法正常工作。

因此，当我单击提交按钮时，如果表单无效（真无效，假有效），我会显示警报。这里是my Plunker

感谢您的帮助

【问题讨论】：

npmjs.com/package/angular-validation

***.com/a/8234912/3110058 使用这个模式，它在你的 pluncker 上运行良好。模式是 /((([A-Za-z]3,9:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)? [A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)( (?:\/[\+~%\/.\w-]*)?\??(?:[-\+=&;%@.\w]*)#? (?:[\w]*))?)/

【参考方案1】：

您可以直接将正则表达式添加到ng-pattern 属性，而不是将正则表达式绑定到范围。像这样：

<input type="text" ng-pattern="/^(http[s]?:\/\/)0,1(www\.)0,1[a-zA-Z0-9\.\-]+\.[a-zA-Z]2,5[\.]0,1/" ng-model="website">

我已经更新了 plunkr。请看看这个。 Plukr

【参考方案2】：

这里的问题是，如果你想从控制器绑定ng-pattern，你的正则表达式不应该包含开始和结束/s。像这样：

$scope.regex = "^(http[s]?:\\/\\/)0,1(www\\.)0,1[a-zA-Z0-9\\.\\-]+\\.[a-zA-Z]2,5[\\.]0,1$"

但是，如果您直接指定ng-pattern="/^(http|https|...)$/" 之类的模式，则还需要额外的/s。

working plunker

【讨论】：

谢谢！我感谢基本概念的帮助。它仍然对这个 URL 有效：fdsfsfsfsf

@MarcosF8 忘记转义转义斜线。现在工作。也更新了 plunker :)

【参考方案3】：

尝试使用 ng2-validation 库。它可用于执行您应该需要的大多数验证。 Angular2 自定义验证，灵感来自 jQuery 验证。

【参考方案4】：

我想我们也可以使用 AngularJs builtin URL validator。

<script>
angular.module('urlExample', [])
.controller('ExampleController', ['$scope', function($scope) 
  $scope.url = 
    text: 'http://google.com'
  ;
]);
</script>

<form name="myForm" ng-controller="ExampleController">
<label>URL:
  <input type="url" name="input" ng-model="url.text" required>
<label>
<div role="alert">
  <span class="error" ng-show="myForm.input.$error.required">
  Required!</span>
  <span class="error" ng-show="myForm.input.$error.url">
  Not valid url!</span>
</div>
 <tt>text = url.text</tt><br/>
 <tt>myForm.input.$valid = myForm.input.$valid</tt><br/>
 <tt>myForm.input.$error = myForm.input.$error</tt><br/>
 <tt>myForm.$valid = myForm.$valid</tt><br/>
 <tt>myForm.$error.required = !!myForm.$error.required</tt><br/>
<tt>myForm.$error.url = !!myForm.$error.url</tt><br/>
</form>

【参考方案5】：

`

if (this.resource.url.match("^(https:\/\/|http:\/\/)")) 
if (this.resource.url.match("^(https:\/\/www\.|http:\/\/www\.)?([da-z.-]+)\\.([a-z.]2,6)")) 

           
         

         else
         
          errorMessages.push("url is invalid");

         

      
      else 
         errorMessages.push("url is invalid");

      

`

【讨论】：

请为您的解决方案添加某种解释

0 在上面的 if 条件下它验证 http: 和 https: 如果 url 匹配它进入第二个条件如果完整的 url "google.com" 匹配如果任何东西错过像 .com 或 www 它显示错误信息