angularjs的表单验证问题

标签：

angularjs表单验证问题

1 可以使用angularjs自带验证，（必填项、email、url）使用方法：

通过myForm.personEmail.$valid是否为true 即可判断是否通过验证。
具体是哪类错误可以通过
demo：

<input type="text" required />  必填

<input type="text" ng-minlength="5" /> 最小长度

<input type="text" ng-maxlength="20" />最大长度

<input type="text" ng-pattern="/[a-zA-Z]/" /> 正则表达式

<input type="email" name="email" ng-model="user.email" /> 电子邮件

<input type="number" name="age" ng-model="user.age" /> 数字

<input type="url" name="homepage" ng-model="user.facebook_url" />url

myForm.personEmail.$error错误信息的显示
demo：

<form name="myForm">
  <input name="personEmail" required type="email" ng-model="person.email"/>
  <span ng-show="!myForm.personEmail.$valid">有错</span>
  <span ng-show="myForm.personEmail.$error.required">必填</span>
  <span ng-show="myform.personEmail.$error.email">email 地址不对</span>

<input type="submit" ng-disabled="myForm.$invalid"/>用来阻止表单提交操作
</form>

屏蔽浏览器对表单的默认验证行为：表单元素上添加novalidate标记

使用formName.inputFieldName.property的格式访问angularjs表单验证相关属性。

formName.inputFieldName.$pristine;表示用户是否修改了表单，没修改过true。

formName.inputFieldName.$dirty；修改过为true

formName.inputFieldName.$valid；经过验证为true

formName.inputFieldName.$invalid；未经过验证为true

可以通过这些类设置特定的样式：

.ng-valid { }
.ng-invalid { }
.ng-pristine { }
.ng-dirty { }
/* really specific css rules applied by angular */
.ng-invalid-required { }
.ng-invalid-minlength { }
.ng-valid-max-length { }

2，除了使用angularjs自带的验证外，可以使用模式匹配的方式（正则表达式）解决这几种情况，也可以自定义验证指令来复写或者重定义验证规则。
demo：

angular.module("myTest", [])
.directive(‘multipleEmail‘, [function () {
return {
require: "ngModel",
link: function (scope, element, attr, ngModel) {
if (ngModel) {
var emailsRegexp = /^([a-z0-9!#$%&‘*+\/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*[;；]?)+$/i;
}
var customValidator = function (value) {
var validity = ngModel.$isEmpty(value) || emailsRegexp.test(value);
ngModel.$setValidity("multipleEmail", validity);
return validity ? value : undefined;
};
ngModel.$formatters.push(customValidator);
ngModel.$parsers.push(customValidator);
}
};
}])

<form class="form-horizontal" role="form" id="custom_form" name="custom_form" novalidate>
<div class="form-group">
<label class="col-sm-2 control-label">多个email</label>

<div class="col-sm-10">
<input multiple-email name="user_email" ng-model="user.email" required class="form-control" placeholder="自定义验证，多个邮箱地址，以“；”或者“;”分割" />
验证通过：{{custom_form.user_email.$valid}}
</div>
</div>
<div class="form-group text-center">
<input class="btn btn-primary btn-lg" ng-disabled="custom_form.$invalid" type="submit" value="提交" />
</div>
</form>

传入的指令中的ng-model的属性：

$viewValue属性保存着更新视图所需的实际字符串。

$modelValue由数据模型的值。$modelValue和$viewValue可能是不同的，取决于$parser流水线是否对其进行了操作。

$parsers的值是一个由函数组成的数组，当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调会以流水线的形式被逐一调用，ngModel从DOM中读取的值会被传入$parsers中的函数，并依次被其中的解析器处理。

备注：ngModel.$setViewValue()函数用于设置作用域中的视图值。

ngModel.$set ViewValue()函数可以接受一个参数。

value（字符串）：value参数是我们想要赋值给ngModel实例的实际值。

$formatters的值是一个由函数组成的数组，其中的函数会以流水线的形式在数据模型的值发生变化时被逐一调用。它和$parser流水线互不影响，用来对值进行格式化和转换，以便在绑定了这个值的控件中显示。
$viewChangeListeners的值是一个由函数组成的数组，其中的函数会以流水线的形式在视图中的值发生变化时被逐一调用。通过$viewChangeListeners，可以在无需使用$watch的情况下实现类似的行为。由于返回值会被忽略，因此这些函数不需要返回值。

使用 ng-class 根据条件添加类

ng-class 允许我们基于一个表达式添加类. 在这种情况下，我们想要想我们的form-group添加一个 has-error 类，如果输入框的状态是$invalid或者不是pristine的话.其工作的方式是 ng-class="{ <class-you-want> : <expression to be evaluated > }". 
demo：

只在提交表单后显示错误信息

对于你想要只在表单正要提交之后才显示错误消息的场景, 你就需要对上面的代码做一些小调整.

1. 你要去掉提交按钮上的ng-disabled，因为我们想要用户即使是在表单没有全部验证完的情况下也能点击提交.

2. 你要在表单已经被提交之后添加一个变量. 在你的 submitForm() 函数中, 只要加入 $scope.submitted = true 就行了;. 一旦表单被提交，它就会保存提交值为true的submitted变量.

3. 将错误规则从ng-class="{ ‘has-error‘ : userForm.name.$invalid && !userForm.name.$pristine }" 调整为 ng-class="{ ‘has-error‘ : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 这就确保了错误消息只会在表单被提交时被显示出来. 你也许会需要为这个变量调整所有其它的 ng-class 和 ng-show.

现在，只有在submitted变量被设置为true时才会显示错误信息.

只有在输入框之外点击时才显示错误消息

只有在输入框之外点击时才显示错误消息（也被叫做失去焦点 blur) 这一需求比在提交时验证要复杂一点. 在失去焦点时验证表单需要一个custom指令. 这是一个可以让你操作DOM的指令.

angularjs的表单验证问题

标签：

原文地址：http://www.cnblogs.com/haojiangwei/p/5125488.html