zoukankan      html  css  js  c++  java
  • angular中的表单验证

    angular中的表单验证很强大,

    一共有5中验证信息,$valid,$invalid,$pristine,$dirty,$error.

    $valid-----当验证通过的时候,为true,不通过的时候为false

    $invalid----当验证不通过的时候,为true,通过的时候为true

    $pristine---当值为初始值的时候,为true,一旦有过改动即为false

    $dirty---当值有改动过即为true,其他即为false

    $error---包含所有的验证信息,如以下例子,$error = {required:false,minlength:false,pattern:false}。哪条验证不通过,它的值就为true。

    以上五个值可以通过表单的name来获取到,参考如下:

    <form novalidate name="myForm">
    <input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
    <div>{{ myForm.myText.$valid }}</div>
    <div>{{ myForm.myText.$invalid }}</div>
    <div>{{ myForm.myText.$pristine }}</div>
    <div>{{ myForm.myText.$dirty }}</div>
    <div>{{ myForm.myText.$error }}</div>
    </form>

    可以结合ng-repeat filter $error等来做一些表单验证

    <script>
    var m1 = angular.module('myApp',[]); 
    m1.controller('Aaa',['$scope',function($scope){
        $scope.text = 'hello';
        $scope.regText = {
            regT : 'default',
            regList : [
               { name : 'default', text : '请输入用户名' },
               { name : 'required', text : '不能为空' },
               { name : 'pattern', text : '只能为字母' },
               { name : 'pass', text : '√' },
            ],
            change : function(err){
                console.log(err);
                for(var attr in err){
                    if(err[attr]==true){
                        $scope.regText.regT = attr;
                        return;
                    }
                }
                $scope.regText.regT = 'pass';
            }
        };
    }]);
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
        <form novalidate name="nForm">
            <label>用户名:
                <input type="text" name="nText" ng-model="regText.name" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/" ng-blur="regText.change(nForm.nText.$error)">
                <span ng-repeat="re in regText.regList | filter:regText.regT ">{{re.text}}</span>
            </label><br><br>
            <label>密码:
                <input type="password" name="nPas" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">
                <span>请输入密码</span>
            </label>
        </form>
    </div>
    

      

  • 相关阅读:
    jQuery的简单应用
    JQuery事件
    [django]数据导出excel升级强化版(很强大!)
    [Django]用户权限学习系列之权限管理界面实现
    [Django]用户权限学习系列之设计自有权限管理系统设计思路
    [jquery]显示隐藏div标签的几种方法
    [Django]用户权限学习系列之User权限基本操作指令
    [jquery]jquery正则表达式验证(手机号、身份证号、中文名称)
    [Django]用户权限学习系列之Permission权限基本操作指令
    [python]set集合学习
  • 原文地址:https://www.cnblogs.com/toodeep/p/4971507.html
Copyright © 2011-2022 走看看