使用 AngularJS 和 HTML 5 验证 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43341426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validate URL with AngularJS and HTML 5
提问by MarcosF8
Good morning all:
大家早上好：
Looks like a very common question, but after googling for hours I am not able to figure this out: how to validate an URL including wwwwithout http.
像一个很常见的问题，看上去不过google搜索小时后，我无法想出解决办法：如何验证包括URLwww没有http。
These is what I did:
这些是我所做的：
- Used the input type url: it does not accept
www.google.com; - Changed the input type to
textand usedng-pattern: I still get thewww.google.cominvalid; - Changed different regex but still not working.
- 使用输入类型 url: 它不接受
www.google.com; - 将输入类型更改为
text并使用ng-pattern：我仍然www.google.com无效； - 更改了不同的正则表达式，但仍然无法正常工作。
So when I click on the submit button, I show an alert if the form is invalid (true invalid, false valid). Here is my Plunker
因此，当我单击提交按钮时，如果表单无效（真无效，假有效），我会显示警报。这是我的Plunker
Thanks for the help
谢谢您的帮助
回答by Muhammed Neswine
Instead of binding the regex to scope, you could directly add the regex to ng-patternattribute. Like this:
您可以直接将正则表达式添加到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">
I have updated the plunkr. Please take a look at this. Plukr
我已经更新了plunkr。请看看这个。普鲁克
回答by tanmay
The thing here is, if you want to bind ng-patternfrom controller, your regex shouldn't contain the starting and ending /s. Like this:
这里的问题是，如果你想ng-pattern从控制器绑定，你的正则表达式不应该包含开始和结束的/s。像这样：
$scope.regex = "^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}$"
But, if you directly specify pattern like ng-pattern="/^(http|https|...)$/", you need the extra /s as well.
但是，如果您直接指定模式 like ng-pattern="/^(http|https|...)$/"，则还需要额外的/s。
回答by DancingDad
Try using the ng2-validation library. It can be used to perform most validations you should ever need. Angular2 custom validation, inspired by jQuery validation.
尝试使用 ng2-validation 库。它可用于执行您应该需要的大多数验证。Angular2 自定义验证，灵感来自 jQuery 验证。
回答by vishnu
I think we can also use AngularJs builtin URL validator.
我认为我们也可以使用AngularJs 内置的 URL 验证器。
<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>
