AngularJS表单验证功能

2023-09-22 22:47:05 49

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。

表单验证不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。

AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用，并且非常方便。AngularJS提供了很多表单验证指令。


Youremail

要使用表单验证，首先要确保表单像上面的例子一样有一个name属性。

所有输入字段都可以进行基本的验证，比如最大、最小长度等。这些功能是由新的HTML5表单属性提供的。

如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记

1.必填项required

验证某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

注释：required属性适用于以下类型：text,search,url,telephone,email,password,datepickers,number,checkbox,radio以及file

2.最小长度ng-minleng="{number}"

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用AngularJS指令ng-minleng="{number}"

3.最大长度ng-maxlength="{number}"

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用AngularJS指令ng-maxlength="{number}"

4.模式匹配 ng-pattern="/PATTERN/"

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

5.电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

6.数字

验证输入内容是否是数字，将input的类型设置为number：

7.URL

验证输入内容是否是URL，将input的类型设置为url：

在表单中控制变量

表单的属性可以在其所属的$scope对象中访问到，而我们又可以访问$scope对象，因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性，我们可以对表单做出实时(和AngularJS中其他东西一样)响应。这些属性包括下面这些。(注意，可以使用下面的格式访问这些属性。)

formName.inputFieldName.property

■未修改的表单

这是一个布尔属性，用来判断用户是否修改了表单。如果未修改，值为true，如果修改过值为false

formName.inputFieldName.$pristine

■修改过的表单

只要用户修改过表单，无论输入是否通过验证，该值都返回true

formName.inputFieldName.$dirty

■合法的表单

这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的，下面属性的值就是true：

formName.inputFieldName.$valid

■不合法的表单

这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的，下面属性的值为true：

formName.inputFieldName.$invalid

■错误

这是AngularJS提供的另外一个非常有用的属性：$error对象。它包含当前表单的所有验证内容，以及它们是否合法的信息。用下面的语法访问这个属性：

formName.inputfieldName.$error

$parsers

当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调用时，$parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后，执行结果会传递给第二个$parse，以此类推

这些函数可以对输入值进行转换，或者通过$setValidity()函数设置表单的合法性。

使用$parsers数组是实现自定义验证的途径之一。

例如，假设我们想要确保输入值在某两个数值之间，可以在$parsers数组中入栈一个新的函数，这个函数会在验证链中被调用。

每个$parser返回的值都会被传入下一个$parser中。当不希望数据模型发生更新时返回undefined。

html






表单测试







good
bad
{{testForm.inputs.$valid}}
{{testForm.inputs.$invalid}}
{{obj.number}}

javascript (test5app.js)

angular.module('myApp',[]).controller('TestController',function($scope){
$scope.obj={
number:34
}
}).directive('ngTest',function(){
return{
require:'?ngModel',
restrict:'AE',
link:function($scope,iElm,iAttrs,ngModel){
if(!ngModel)return;
ngModel.$parsers.push(function(viewValue){
varnum=parseInt(viewValue);
if(num>=0&&num<99){
ngModel.$setValidity('test',true);
returnviewValue
}else{
ngModel.$setValidity('test',false);
returnundefined
}
})
}
}
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

AngularJS表单验证功能

热门推荐

随机推荐