AngularJs 自定义表单验证

一、AngularJs中的表单验证，仅提供了一些前台格式验证，如果想通过后台验证，则需要自定义处理

自定义指定使用ajax后台验证示例：

    <style>        form .ng-invalid {            background: red;        }    </style><div id="app" ng-app="myApp" ng-controller="myCtrl">    <form name="myForm" novalidate action="#">        <input type="" name="name" ng-model="name" value="" required check-name="name">        <br>        <input type="" name="passowd" ng-model="password" required value="">        <br>                <input type="" name="username" ng-model="username" value="" required check-name="username">        <br>        <br>        <input type="submit" ng-disabled="myForm.$invalid" name="" value="提交处理">    </form></div>

js：

var app = angular.module('myApp', []);//自定义指定验证//$timeout 控制在指定时间没有输入的时候提交验证app.directive('checkName', function ($http, $timeout) {    var timer = null;    return {        require: 'ngModel',        link: function (scope, ele, attrs, c) {            //监视属性值改变            scope.$watch(attrs.ngModel, function (value) {                if (!value)                    return;                if (timer != null)                    $timeout.cancel(timer);                c.$setValidity('unique', false);                ele[0].style.backgroundColor='yellow';                timer = $timeout(function () {                    console.info(value);                        ele[0].style.backgroundColor='white';                    c.$setValidity('unique', true);                }, 1000);            });        }    }});app.controller('myCtrl', function ($scope) {});

通过指令返回unique的布尔值来决定显示的警告信息。

二、表单验证状态访问

由于表单的属性可以在其$scope对象中访问到，而我们又可以直接访问到$scope，因此js可以间接的访问DOM的表单属性，借助这些属性，我们可以对表单做出实时响应。

这些属性有：

1. 未修改的表单，用来判断用户是否修改了表单，如果修改了则为true，未修改则为false。

formName.inputFieldName.$pristine

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

formName.inputFieldName.$dirty

3. 合法的表单，这个属性是用来判断表单的内容是否合法的，如果合法则该属性的值为true

formName.inputFieldName.$valid

4. 不合法的表单，这个属性与上个属性正好相反，如果不合法，则该属性值为true

formName.inputFieldName.$invalid

5. 错误，$error对象包含了当前表单的所有验证内容，以及它们是否合法的信息，如果验证失败，该属性值为true，如果验证成功，则该值为false

formName.inputFieldName.$error

更多：

AngularJs表单验证实例1

AngularJS阻止事件冒泡$event.stopPropagation()

AngularJs和JQuery Ajax互操作