Angular 学习笔记——表单验证

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/angular-1.3.0.js"></script>
    <script>
        var m1 = angular.module('myApp',[]);
        m1.controller('may',['$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:'密码大于六位'},
                    {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='may'>
        <form novalidate name="myform">
            <div>
                <label>用户名:</label>
                <input type="text" name="nusername" ng-model='regText.name' required ng-pattern='/^[a-zA-Z]+$/' ng-blur="change('regText',myform.nusername.$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',myform.nPassword.$error)">
                <span ng-repeat='re in regPassword.regList | filter:regPassword.regVal'>{{re.tips}}</span>
            </div>
        </form>
    </div>
</body>
</html>

相关阅读:
package.json与package-lock.json的区别
ES6（一） let和const
JSON对象的代码中不能有注释语句
详解webpack4打包--新手入门（填坑）
解决“webpack不是内部或外部命令”（基于webpack4.X）
解决“npm不是内部或外部命令“
静态页之间传值
详解animate.css动画插件用法
基于PIL模块创建验证码图片
python中单下划线的变量

原文地址：https://www.cnblogs.com/mayufo/p/5008481.html