码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs表单验证功能

时间:2017-04-16 09:31:47      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:文档   tle   name   oct   char   ng-repeat   type   body   用户   

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module(myApp,[]);
m1.controller(Aaa,[$scope,function($scope){
    
    $scope.regText = {
        regVal : default,
        regList : [
            { name : default , tips : 请输入用户名},
            { name : required , tips : 用户名不能为空},
            { name : pattern , tips : 用户名必须是字母},
            { name : pass , tips : }
        ]
    };
    
    $scope.regPassword = {
        regVal : default,
        regList : [
            { name : default , tips : 请输入密码},
            { name : required , tips : 密码不能为空},
            { name : minlength , tips : 密码至少6位},
            { name : pass , tips : }
        ]
    };
    
    $scope.change = function( reg , err ){
        for(var attr in err){
            if( err[attr] == true ){
                $scope[reg].regVal = attr;
                return;
            }
        }
        $scope[reg].regVal = pass;
    };
    
}]);



</script>
</head>

<body>
<div ng-controller="Aaa">
    <form novalidate name="nForm">
        <div>
            <label>用户名:</label>
            <input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change(‘regText‘,nForm.nText.$error)">
            <span ng-repeat=" re in regText.regList | filter : regText.regVal ">{{ re.tips }}</span>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" name="nPassword" ng-model="regPassword.name" required ng-minlength="6" ng-blur="change(‘regPassword‘,nForm.nPassword.$error)">
            <span ng-repeat=" re in regPassword.regList | filter : regPassword.regVal ">{{ re.tips }}</span>
        </div>
    </form>
</div>
</body>
</html>

AngularJs表单验证功能

标签:文档   tle   name   oct   char   ng-repeat   type   body   用户   

原文地址:http://www.cnblogs.com/angelatian/p/6717704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!