ng-pattern在angular js中不起作用
在AngularJS中，ng-pattern是一个内置的指令，用于验证用户输入的值是否符合指定的正则表达式。然而，如果ng-pattern在AngularJS中不起作用，可能有以下几个原因：
- 错误的正则表达式：首先，需要确保ng-pattern指定的正则表达式是正确的。正则表达式应该以斜杠（/）开头和结尾，并且符合JavaScript的正则表达式语法。例如，ng-pattern="/^0-9{2}$/"
- 没有使用表单控件：ng-pattern只能用于表单控件，例如input、textarea等。确保你的ng-pattern指令应用在正确的表单控件上。
- 没有使用ng-model指令：ng-pattern需要和ng-model指令一起使用，以便获取用户输入的值并进行验证。确保你的表单控件上有ng-model指令。
- 没有使用表单验证：ng-pattern只有在表单验证被启用时才会起作用。确保你的表单元素所在的form标签上有ng-submit或ng-form指令，并且设置了novalidate属性。
如果以上步骤都正确无误，但ng-pattern仍然不起作用，可能是由于其他代码或指令的冲突或错误导致的。在这种情况下，建议检查控制台是否有任何错误信息，并逐步排除可能的问题。
对于AngularJS中ng-pattern不起作用的问题，腾讯云并没有特定的产品或链接提供解决方案。然而，腾讯云提供了一系列与云计算相关的产品和服务，例如云服务器、云数据库、云存储等，可以帮助开发者构建和部署应用程序。您可以访问腾讯云官方网站（https://cloud.tencent.com/）了解更多信息。
相关·内容
我遇到了一个使用Angular JS ng-pattern的正则表达式问题。我为输入验证编写了以下正则表达式，它拒绝所有包含换行符、制表符和回车的输入：
\A(.*)[^\t\r\n]\z
我使用Rubular进行了测试，它工作正常。但是当我在我的.aspx的ng-pattern中放入与/myregex/ (即: /\A(.*)^\t\r\n\z/ )相同的表达式时，显然我指定了触发条件"...$error.pattern"，它不起作用，也就是说，它总是认为输入是错误的。编辑:在我的正则表达式中，"A(.“还有一个*
浏览 0提问于2015-01-23得票数 1
这是一个非常简单的例子：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js" data-require="angular.js@1.2.x"></script>
</hea
浏览 1提问于2014-02-06得票数 1
1回答
我一直在开发一个表单，它可以接受#和@这样的Twitter参数来填充Twitter提要。
使用Angular.js时，我计划在保存之前使用内置的ng-pattern指令来验证输入，但是验证非常奇怪。在输入时，它将输入的第二个字符中的“有效”字符串标记为无效。
很难解释确切的行为，所以这里是一个。
为了完整起见，我将在这里使用奇怪的ng-pattern添加输入字段：
<input type="text" ng-pattern="/(^|\s)@(\w+)|(^|\s)#(\w+)/g" ng-model="foo" name="foo
浏览 5提问于2013-09-23得票数 3
回答已采纳
在将angular JS库升级到1.4.1之后，使用Angular ngPattern的模式验证不起作用。请参阅下面的代码。
<form class="form-horizontal" name="someForm" role="form" novalidate>
<div>field1Value = '{{field1Value}}'</div>
<p class="input-group" ng-class="{ '
浏览 18提问于2015-09-09得票数 0
我想用字母来验证用户名，并且不会输入空格...在这种情况下，我使用ng-pattern，因为ng-pattern='/^a-zA-Z\d-_+$/‘..but ng-pattern不起作用.我是angular js中的新手，..any angular js可以提供帮助，please.Usename必须是必需的，并且只接受leetes没有数字和空格
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
浏览 4提问于2018-06-13得票数 0
我刚刚开始用一些正则表达式测试ng-pattern，这些正则表达式我已经在非Angular项目中使用过，并且工作得很好。但是使用ng-pattern，它们似乎不起作用。例如，我有一个正则表达式，它成功地检查了一个6-20个字符的字符串，其中至少有1个字母字符和1个数字字符：
"^.*(?=.{6,20})(?=.*\d)(?=.*[a-zA-Z]).*$"
然而，在下面的Angular示例中，它成功地检查了所有内容，但当字符串超过20个字符时不会触发：
<div class="controls">
<input type
浏览 0提问于2013-07-12得票数 4
回答已采纳
我刚接触angularjs，我需要帮助来找出我做错了什么。我正在使用ngMessages进行表单验证，但是表单提交不起作用。
下面是我的代码：
angular.module("myapp", ["ngMessages"])
p {
color: red;
}
<script src="https://code.angularjs.org/1.7.2/angular.js"></script>
<script src="https://code.angularjs.org/1.7.2/angular-m
浏览 0提问于2018-08-21得票数 0
1回答
这是我的代码，我想验证电子邮件和电话号码。但出于某种原因，这是行不通的。我遗漏了什么，我的代码中是否包含了一个文件。
<html ng-app="myApp">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstra
浏览 3提问于2014-06-12得票数 2
回答已采纳
我有一个代码，其中有两个字段具有相同的输入名称，如下所示
<input ng-if="max_length == 5" type="text" name="zipcode" value="" ng-model="store_zip.zipcode" ng-pattern="/^[0-9]*$/" ng-maxlength="max_length" required>
<input ng-if="max_length == 7" type="t
浏览 0提问于2017-04-09得票数 0
我使用了text-angular来获取用户的输入。下面的代码不会验证输入
<div text-angular ng-pattern="/^[a-zA-Z0-9\-\s]+$/" name="description" ng-minlength="100" ta-min-text="100" required>
</div>
<p ng-show="jform.description.$invalid && !jform.description.$pristi
浏览 6提问于2016-01-15得票数 0
我试图创建一个下拉列表使用角Js。当前应该在下拉列表中选择的元素来自某个数据库(在示例应用程序中，初始化为$scope.choice =“2”)。
对于下面的代码，列表中的最后一个元素是alwyas。此外，在关联文本框中，我希望根据选定的元素更改描述，但它总是默认为列表框中第一项的描述。
JS文件
var app = angular.module('app',[]);
app.controller('Test',function($scope)
{
$scope.choice = "two";
$scope.items = [{n
浏览 1提问于2014-12-02得票数 0
回答已采纳
2回答
angular js如何监控键击，使得html中的输入域不接受非数字值，而在每个击键上只接受整数和浮点数？
<form name="myForm">
<input ng-pattern="/^(?=.+)(?:[1-9]\d*|0)?(?:\.\d+)?$/" ng-model="value" name="number"/>
Valid? {{myForm.number.$valid}}
</form>
浏览 3提问于2013-09-25得票数 1
我有许多使用ng-pattern="/^\d{0,10}(\.\d{1,2})?$/"的文本框。我想集中这个模式。我在js文件中创建了一个变量。看起来像vm.ngPatternAmount = "/^\d{0,10}(\.\d{1,2})?$/";。之后，我将表单上的所有ng模式更改为ng-pattern={{vm.ngPatternAmount}}。但这不起作用。请帮我检查一下。
非常感谢
浏览 2提问于2016-02-01得票数 1
回答已采纳
我在AngularJS中的正则表达式有一个小问题
我在html中的正则表达式如下所示：
ng-pattern="[adfijmPrsyz\d]+"
但是我在控制台中得到了一个错误，它说：
angular.js:13920 Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 12-12 [\] in expression [[adfijmPrsyz\d]+].
我的正则表达式应该做到这一点:只有a，d，f，i，j，m，P，r，s，y，z和数字0到9应该是有效的。
如果我可以在控制器中设
浏览 8提问于2016-12-07得票数 0
这个问题可能很简单，但在尝试使用regex模式时看起来很复杂。
我有一个文本区域，我试图允许字母数字字符，只有5个特定的特殊字符，如. , ' " :
键入时应禁用其他特殊字符。
我尝试过从angularjs中使用ng-pattern，但是当我开始键入除允许字符之外的特殊字符时，它并没有被禁用。
<textarea rows="5" cols="50" ng-pattern="/^[a-zA-Z0-9.,:'"]*$/">
主要的问题是，当我尝试允许' "同时使用这两个特定的特殊字符时，
浏览 1提问于2018-11-16得票数 1
如果输入字段的ng-pattern与正则表达式不匹配，我想使用ng-disable禁用按钮。在这种情况下，正则表达式是"0-9“。我已经尝试了以下代码：
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="
浏览 4提问于2018-02-01得票数 0
我试图通过使用"OR“条件将电子邮件和手机号码的两个正则表达式变量regex1和regex2传递到单个ng模式中，但它不起作用。如果我一次只传递一个变量，那么它就能完美地工作。所以我需要做的就是一次传递两个变量到一个ng-pattern指令中。请建议解决方案..
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Form Validate<
浏览 4提问于2017-01-20得票数 0
当我将输入标记插入到div中时，在带有ng-pattern的变量中有一个输入标记，它的ng-pattern不工作。
风格：
.from_fields {
transition: all linear 0.5s;
background: transparent;
}
.from_fields.ng-invalid {
color: white;
background: red;
}
脚本
$scope.input='<input type="text" ng-pattern="/^[0-9]{1,7}$/" class
浏览 0提问于2016-02-11得票数 0
回答已采纳
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.removeSpace=function(){
$scope.name = $scope.name.replace(/\s+/g, ' ');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"><
浏览 2提问于2017-05-03得票数 1
2回答
我在电子邮件验证方面有问题。我使用Angular.js。在我的形式中，我有一个输入：
<input class="form-control input-flat-underline"
ng-pattern="/^[\w\.-]+@[\w\.-]+\.[\w]+$/"
id="email" name="email" ng-model="ctrl.user.email" required t
浏览 2提问于2016-05-24得票数 1
我只需要在用户输入值大于1且输入字段不包含正则表达式中定义的值时显示span。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-form-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.
浏览 0提问于2016-09-08得票数 0
回答已采纳
3回答
我做了一个小js
我还将代码添加到堆栈溢出代码段，但由于某种原因，它对我不起作用。
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.my_model = ''
$scope.my_regex = '/^[A-Za-z]+(\,[A-Za-z]+)*$/';
$scope.my_placeHolder = 'write something';
}
.invalid input[name=my_input]{
浏览 3提问于2017-07-06得票数 0
回答已采纳
可能已经回答了一些类似的问题(ng-pattern + ng-change)，但所有响应都无法解决此问题。
我有两个用于创建表单输入的重写指令，一个父指令用于控制名称、标签、验证器等，另一个子指令用于设置模式和输入类型特定的内容。
然而，当设置一个模式时，当ng-pattern返回false时，我的模型上的值被设置为undefined。
指令：
<input-wrapper ng-model="vm.customer.phone" name="phone" label="Phone number">
<input-tex
浏览 4提问于2016-12-23得票数 3
您将如何禁用，或至少更改，如何角验证type=email输入？
目前，如果您使用type=email，角本质上是双重验证。当浏览器(在本例中是Chrome)验证电子邮件时，angular也会这样做。不仅如此，在Chrome foo@bar中有效的内容在Angularjs中也是无效的。
我能找到的最好的是ng-pattern，但是ng-pattern只是为输入类型添加了第三个模式验证。而不是替换角的电子邮件验证。嘿嘿
有什么想法吗？
浏览 6提问于2013-01-18得票数 16
1回答
我在使用Angular的内置表单验证器时遇到了一些奇怪的验证行为。在我的用户名模式字段中，我有一个只允许字母或数字(ng-pattern="/[A-Z0-9]/i")的ng- <input>。
但是验证并不像我期望的那样工作。例如，当我输入一堆符号，例如!@#$时，它会识别用户名输入是无效的。但是如果我从几个字母开始，然后输入一堆符号，比如SomeUser!@#$，它会在第一个符号!上抛出一个验证错误，但是当我输入第二个符号@时，它会将错误重新关闭。每输入第三个或第四个符号，我就会再次打开/关闭错误。
我试着查看了Angular文档，但我没有看到任何迹象表明我没有正
浏览 0提问于2015-11-08得票数 1
我正在创建一个指令，它基本上用作<input>，但具有一些特殊功能：
app.directive('skInput', function(){
return {
restrict: 'A',
replace:true,
template: '<div style="display:inline-block">\
<span ng-show="disabled&#
浏览 0提问于2015-02-18得票数 2
2回答
我正在尝试创建一个带有angularjs的HTML数字输入，它只允许整数，不允许小数。它适用于具有小数部分的数字，例如"3.5"，但不适用于只有一个尾随小数但后面没有数字的数字，例如“3”。
我使用的模式是"/^\d+$/"，即
<input type="number" ng-model="price" name="price_field" ng-pattern="onlyNumbers" required>
在控制器中
$scope.onlyNumbers = /^\d+$/;
如果我
浏览 4提问于2016-10-10得票数 1
1回答
如果元素是有效的，没有其他错误，我如何才能在模糊上触发函数调用？
HTML
<input type="text" id="order" ng-model="order" name="order" class="form-control"
ng-pattern="/^[0-9]*$/" ng-minlength="9" maxlength="9"
required="" ng-blur="something()"
浏览 0提问于2014-10-01得票数 4
我的angular表单只显示我在下面定义的文本。它不会在表单输入字段中显示红色，以告诉用户存在错误。请告诉我发生了什么事。
请帮帮忙。
谢谢!
我在页面中包含了以下文件：
<script src="js/lib/angular/angular-1.0.1.js"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" href
浏览 0提问于2012-09-03得票数 2
如何验证输入文本框作为数字，我使用ng-pattern验证数字，但是我的输入名称是名称数组，如"itempriceFrom“，那么如果输入名称是"priceFrom”，我如何验证这个field.This验证工作正常。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope.name = "John Doe";
});
<!DOCTYPE html>
<script src=&
浏览 0提问于2018-07-16得票数 0
1回答
我的regex模式必须以/*开头，并且必须以*/；结束，其中可能包含所有字母、数字、特殊字符--0次或多次。
为此，我做了以下正则表达式：
[/*][a-zA-Z0-9~@#\^\$&\*\(\)-_\+=\[\]\{\}\|\\,\.\?\s]*[*/;]
但是，该表达式不会显示模式错误，例如：
/*
/* sdfsdff
/* sdfsfeff *
/* fefef3323 */
这是错误的。它必须以/*开头，以*/；结尾，不惜任何代价。
下面是测试此模式的角度代码。请有人帮忙！
代码：
<html>
<head>
浏览 1提问于2016-05-26得票数 1
回答已采纳
示例
我想在控制器中使用模式在模板中进行验证
angular.module('app', []).controller('ctrl', function ($scope) {
$scope.pat = /(\(|\)|\+|\d)+/g;
})
但是当输入值为123时，ng-pattern验证字段--
<input type="text" ng-pattern="pat" name='asd' ng-model='asd'>
但是内联模式属性工作正常，请注意123--是无效的
<
浏览 0提问于2015-07-10得票数 1
1回答
我已经有了正则表达式$scope.pa = /^([\w-~!@#\$]+)$/i，它可以很好地满足我的需求。现在我想限制这个正则表达式，使它只允许0到15个字符。因此，我将其更改为$scope.pa = /^([\w-~!@#\$]+){0,15}$/i;，但0到15个字符的限制不起作用。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http
浏览 0提问于2016-11-16得票数 0
2回答
我正在制作一个简单的html页面，通过angularjs进行验证。我已经通过这个过程获取了带有angularjs的html文件。
<title>Student Registration Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
当我以这种方式进行验证时
<body ng-app>
然后，我在文本区域中进行验证，如下所示
<i
浏览 0提问于2015-08-24得票数 0
这是角的基本问题，但我无法修复；我想使用ng-pattern验证电子邮件地址，但在某些条件下失败了，请参阅。
失败条件:当我编写some@thing时，它验证了OK，但这是不正确的。请帮我解决这个基本问题。
(function() {
var app = angular.module('app', []);
app.controller ('MainCtrl', function ($scope){
var vm = this;
vm.title = "Email Validation";
vm.email = "&#
浏览 3提问于2017-05-11得票数 0
回答已采纳
在我的代码中按钮是正确创建的，但在键入第一行后，单击Add fields.the close按钮在first row.but中被禁用我只想在当前键入中禁用row.other close按钮是启用的。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
浏览 3提问于2015-12-21得票数 0
这是我的
我在@标记前面放了一些空格，但是提交按钮没有消失，为什么？这仍然是一个错误的错误值，我希望提交按钮被删除。
我的代码是这样的
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.
浏览 2提问于2015-08-03得票数 2
回答已采纳
3回答
我是Angular的新手，在获取ng-pattern来验证基于REGEX的电子邮件地址时遇到了麻烦。事实上，电子邮件的另一个默认角度验证也会改变行为，只有在我插入ng-pattern时整个字段为空时才会显示错误。最初尝试使用指令和控制器，但发现ng模式(在理论上)可以达到验证电子邮件的相同效果，因此决定使用它。
我已经使用了几个REGEX模式，并且阅读了一些关于ng-pattern的文章，比如来自：、、和许多其他链接，但是都不起作用。有没有人知道我需要做些什么才能让事情变得正常？
<form name="userForm" novalidate>
<
浏览 5提问于2016-02-11得票数 4
回答已采纳
1回答
请看一看普朗克。
其中，ng-pattern regEx不会应用于输入文本字段。
只有所需的验证才能正确应用。
HTML：
<body ng-controller="tableController">
<form name="test">
<div ng-repeat="model in models">
<span ng-bind="model.caption"></span>
<div n
浏览 0提问于2014-03-24得票数 6
回答已采纳
我希望创建一个自定义指令，它呈现为一个输入类型元素。指令应该重用angularjs验证框架。下面是我创建的实际操作的custom-input指令：
<!doctype html>
<html ng-app="validationApp">
<body>
<div class="container" ng-controller="ValidationController as validationController">
<form name="myForm">
浏览 4提问于2014-10-18得票数 4
回答已采纳
为什么当输入字段被禁用时，angular会对模式求值。它的行为应该与隐藏输入字段时的行为相同吗？
看看这把小提琴，
<div ng-app>
<div ng-controller="PatternTestCtrl">
<form name="ngform">
<label for="phone">Change the text to match the placeholder:</label><br/>
浏览 2提问于2015-03-23得票数 1
1回答
我知道把控制器放在指令中是可能的，但是我不能让它工作，它应该是怎样的。在下面添加了柱塞链接。
在一个Javascript文件中我的工作指令和控制器
这段代码运行良好，但我想修改app.controller并将其移动到app.directive中。
app.controller('NameCtrl', function () {
var vm = this;
vm.namePattern = '/^[a-zA-Z ]{1,25}$/';
});
app.directive('nameDirective', function ()
浏览 1提问于2017-03-26得票数 1
回答已采纳
在任何浏览器中，简单的angularjs表单验证都不能工作。我正在使用Netbeans 8.0.2IDE。我不知道问题出在哪里。代码有什么问题吗？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Number only</title>
<link rel="stylesheet" href="
浏览 2提问于2015-06-12得票数 1
回答已采纳
有人能建议我如何全局添加ng-pattern / directive / RegEx吗？因此，我不想转到每个页面，通过添加ng-pattern或添加指令来触摸每个输入。 我的应用程序大约有200页，我不想限制每个文本输入只有字母数字。 有没有什么解决方案可以写出适用于整个应用程序的通用逻辑？请建议，我正在使用Angular 8。 提前谢谢你。
浏览 6提问于2020-10-02得票数 0
回答已采纳
我不擅长使用正则表达式，但我想知道是否可以将ng-pattern与变量一起使用
例如,
ng-pattern="/^{{validationCode}}$/"
其中，validationCode是附加到控制器中的$scope的变量
// Inside Controller
$scope.validationCode = 'response returned from server'
如果
$scope.validationCode = 1234123412351234
那么ng模式将是
ng-pattern="/^1234123412351234$/&#
浏览 1提问于2015-02-26得票数 19
回答已采纳
我对Angular2非常陌生，似乎在任何地方都找不到答案。我有一个input (如下图所示)，但我只希望它允许以下内容：
A-Z
阿-兹
‘
-
空格
我不知道该怎么做。我试过ng-pattern="/^[a-zA-Z\s]*$/"，pattern="/^[a-zA-Z\s]*$/"和ng-pattern-restrict="/^[a-zA-Z\s]*$/"。
<td>
<md-input-container>
<input mdInput [(ngModel)]
浏览 6提问于2017-06-12得票数 8
回答已采纳
1回答
我遇到了一个非常奇怪的错误。我正在做一个使用样式指南的项目。
我有以下组件文件，my-profile.component.js，附在app.mymodule上
my-profile.component.js
(function() {
'use strict';
angular
.module('app.mymodule')
.component('myProfile', { })
.controller('MyProfileController', myProfi
浏览 1提问于2015-07-14得票数 0
回答已采纳
我有一个输入字段，只有当它只包含数字，没有特殊字符和空格时才有效。我在angular中使用ng-pattern来验证输入。
我尝试过使用：
/^\d+$/
/^\d*$/
/^[0-9]+$/
这些方法可以防止特殊字符和字母，但对空格没有任何作用。有没有人知道将空格视为无效字符的正则表达式？我试图避免使用keyCode阻止输入。
如果已经有这样的帖子，我很抱歉。我找到了很多类似的，但对空间没有任何帮助。
编辑:即使regex被认为可以正常阻止空格，但它似乎不能与ng-pattern一起工作：
<input type="tel" maxlength="10
浏览 1提问于2015-10-25得票数 2
2回答
‘`Angular Utils’项目()中的ui-mask有点太有限了。
例如，美国电话号码的第一个数字应该是2-9。在ngPattern中，它应该是
ng-pattern="/^\([2-9]\d{2}\)\d{3}-\d{4}(x\d{1,4})?$/"
那么，如何编写一个输入掩码来防止用户在第一个数字中输入0或1？有没有更好的输入掩码我们应该用在Angular上？
浏览 2提问于2015-02-03得票数 9
1回答
我在android工作室开发了phonegap应用程序。
我有一个输入字段，必须允许abc字符，引号和双引号。
想要的html代码：
<input placeholder="last name" type="text" ng-model="currentUser.LastName"
ng-pattern='/^([A-Za-z\"\' ]){1,45}$/'
required
浏览 1提问于2016-05-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
