angular编写表单验证

angular编写表单验证#

一、整体概述

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

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

二、重点说明

1、表单属性：

$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>

**2、相关指令：**

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>

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

4、确认密码自定义指令

确认密码这个暂时无法通过原有的指令实现，所以使用了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`