zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    十四行诗 Sonnet 15
    P3386 【模板】二分图匹配
    20171105模拟题
    需要注意的各种各种 持续更新
    P1315 观光公交 贪心
    【搬家辣】
    【洛谷P2387】魔法森林
    【洛谷P3369】普通平衡树(splay)
    【算法详解】splay的初步了解
    研究性学习代码
  • 原文地址:https://www.cnblogs.com/mayufo/p/5008481.html
Copyright © 2011-2022 走看看