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>