AngularJs 自定义表单验证

前端之家收集整理的这篇文章主要介绍了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互操作

原文链接:https://www.f2er.com/angularjs/146755.html

猜你在找的Angularjs相关文章