angular编写表单验证

angular编写表单验证

1、总体概述

表单内容以下图，包括经常使用的用户名、密码、确认密码、手机、邮箱等

1. 总体js代码不多，就一个指令用于写确认密码和密码是否相等。其余 验证都是使用angular自带的指令进行校验和显示。
2. 本demo还使用了bootstrap的栅栏功能进行布局，由于想写的是demo因此不少样式以及其余限制就不写了，我认为越是简单越好让别人改写使用

2、重点说明

一、表单属性：

$dirty:已经修改过

$invalid:不合法

$valid:合法

$error:错误

$pristine:未修改过

novalidate 阻止表单默认操做





<span class="col-4" ng-show="myForm.password.$dirty && myForm.password.$invalid">

<small class="text-danger" ng-show="myForm.password.$error.required">

密码是必填的

</small>

<small class="text-danger" ng-show="myForm.password.$error.minlength">

长度不能小于8位

</small>

<small class="text-danger" ng-show="myForm.password.$error.maxlength">

长度不能大于64位

</small>

</span>





二、相关指令：

ng-minlength:最小长度

ng-maxlength：最大长度

required：必填

ng-pattern：正则表达式验证

ng-disabled：按钮禁用





<input type="text" class="col-6" name="phone" ng-model="phone" ng-pattern="/(^0\d{2,3}-\d{7,8}$)|(^1[3|4|5|6|7|8][0-9]{9}$)/" required/>




<button ng-disabled="myForm.$invalid" ng-click="submit()">submit</button>

三、form表单必定要有name属性，每一个input值也须要有name属性，好比已经输入过的表单表示是：myForm.name.$dirty 即 表单name.输入name.表单属性

四、确认密码自定义指令

确认密码这个暂时没法经过原有的指令实现，因此使用了directive，主要是经过观察两个输入框的值，若是不相等则在确认密码栏后显示错误信息，以下





var app = angular.module('app',[]);

app.directive('compare',function(){

return {

require: 'ngModel',

link: function(scope,ele,attrs,ctrl){

var flag = false;

scope.$watch("password",function(scope,ele,attrs,ctrl){

var password2 = attrs.myForm.password2.$viewValue;

if(scope != password2) {

flag = true;

}else{

flag = false;

}

attrs.myForm.password2.$invalid = flag;

})

scope.$watch("password2",function(scope,ele,attrs,ctrl){

var password = attrs.myForm.password.$viewValue;

if(scope != password) {

flag = true;

}else{

flag = false;

}

attrs.myForm.password2.$invalid = flag;

})

}

}

})



源代码见github： https://github.com/liaoanran/angular-formValidation