网址验证。 ng-pattern不起作用 [英] URL validation. ng-pattern not working

问题描述

< pre-class =snippet-code-js lang-js prettyprint-override> =（^ http（https | ftp）：\ / \ /）？（[az ] + \。）？[a-z0-9 - ] +（\。[az] {1,4}）{1,2}（/.* \？。*）？$';这是正在使用的正则表达式来验证网址，它的工作正常。我已经在AngularJS网站上检查了它。

< div class = field_input > < div style =width：100％;> < input type =textname =websiteng-model =custom.websitesplaceholder =www.daiict.ac.inng-minlength = 3 ng-pattern =regexrequired /> < / div>< / div>< div class =valid-chkng-show =requestForm1.website。$ dirtystyle =margin-top：5px;> < i style =font-size：1.15em; padding：0px; ng-class ={'false'：'icon-close'，'true'：'icon-correct'} [requestForm1.website。$ valid]class =icon-correct>< / i>< ; / div>

试图验证输入字段。
但是这不起作用。另外，当我使用ng-pattern对输入字段进行所有其他验证时，除必需之外，也不起作用。任何想法为什么...

解决方案

您的 ng-pattern =regex包含一个字符串 regex 作为它的值。为了引用真正的变量 $ scope.regex ，您需要使用模板语法：

  ng-pattern ={{regex}}
  

由于该模式是使用字符串定义的，因此您需要双击转义反斜杠（请参阅

  $> 
 参考页面上的类似示例代码） scope.regex ='^（（https？| ftp）：//）？（[A-Za-z] + \\。）？[A-Za-z0-9-] +（\\ [A-ZA-Z] {1,4}）{1,2}（/.* \\ *）$'？？; 
  

或者将它们放到字符类中以避免含糊不清：

  $ scope.regex ='^（（https？| ftp）：//）？（[az] + [。]）？[a-z0- 9  - ] +（[] [AZ] {1,4}）。{1,2}（/.* [] *？）$'？; 
  

甚至可以传递 RegExp 对象您可以使用不区分大小写的标志：

  $ scope.regex =/ ^（（https？| ftp）： ？\\ / \\ /）（[AZ] +）[α-Z0-9  - ] [。] [。] +（[AZ] {1,4}）{1,2}（ \\ /.*[?].*)?$/我; 
  

或者，可以使用RegExp构造函数定义与上面相同的表达式：

  $ scope.regex = RegExp（'^（（https？| ftp）：//）？（[az] + [。]）？[ a-z0-9  - ] +（[。] [az] {1,4}）{1,2}（/.* [？]。*）？$'，'i'）; 
  

我也建议缩短 http | https 到 https？。

$scope.regex = '^((http|https|ftp):\/\/)?([a-z]+\.)?[a-z0-9-]+(\.[a-z]{1,4}){1,2}(/.*\?.*)?$';

This is the regular expression i'm using to validate url, and its working fine. I have checked it on AngularJS website.

<div class="field_input">
  <div style="width: 100%;">
    <input type="text" name="website" ng-model="custom.websites" placeholder="www.daiict.ac.in" ng-minlength=3 ng-pattern="regex" required/>
  </div>
</div>
<div class="valid-chk" ng-show="requestForm1.website.$dirty" style="margin-top: 5px;">
  <i style="font-size: 1.15em;padding:0px;" ng-class="{'false':'icon-close', 'true': 'icon-correct'}[requestForm1.website.$valid]" class="icon-correct"></i>
</div>

This is html snippet where the i'm trying to validate the input field. However this is not working. Also when I used ng-pattern all other validations on input field, except required, are also not working. Any idea why...

解决方案

Your ng-pattern="regex" contains a string regex as its value. In order to refer to the real variable $scope.regex, you need to use the template syntax:

ng-pattern="{{regex}}"

Also, since the pattern is defined using a string you need to double escape the backslashes (see a similar example code at the ngPattern reference page):

$scope.regex = '^((https?|ftp)://)?([A-Za-z]+\\.)?[A-Za-z0-9-]+(\\.[a-zA-Z]{1,4}){1,2}(/.*\\?.*)?$';

Or just place them into a character class to avoid any ambiguity:

$scope.regex = '^((https?|ftp)://)?([a-z]+[.])?[a-z0-9-]+([.][a-z]{1,4}){1,2}(/.*[?].*)?$';

Or even pass the RegExp object since that way you can use the case-insensitive flag:

$scope.regex = "/^((https?|ftp):\\/\\/)?([a-z]+[.])?[a-z0-9-]+([.][a-z]{1,4}){1,2}(\\/.*[?].*)?$/i";

Alternatively, the same expression as above can be defined with a RegExp constructor:

$scope.regex = RegExp('^((https?|ftp)://)?([a-z]+[.])?[a-z0-9-]+([.][a-z]{1,4}){1,2}(/.*[?].*)?$', 'i');

I also suggest shortening http|https to https?.

这篇关于网址验证。 ng-pattern不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！