angularjs 表单校验
生活随笔
收集整理的這篇文章主要介紹了
angularjs 表单校验
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>//驗證通過不通過的樣式
input.ng-valid{ border:1px green solid; background:green;}
input.ng-invalid{ border:1px red solid; background:red;}
</style>
<script src="angular.min.js"></script>
<script>var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){$scope.text = 'hello';
}]);</script>
</head><body>
<div ng-controller="Aaa"><form novalidate name="myForm">//ng-model是將視圖綁定Model（變量）<input type="text" name="myText" ng-model="text" required ng-minlength="5" ng-pattern="/^[a-zA-Z]+$/">//通過名字來查找輸入框<div>{{ myForm.myText.$valid }}</div> //校驗成功是true,<div>{{ myForm.myText.$invalid }}</div> //校驗成功是false,<div>{{ myForm.myText.$pristine }}</div> //驗證的值沒有修改過為true修改后是false<div>{{ myForm.myText.$dirty }}</div> //驗證值修改后為true沒有修改為false<div>{{ myForm.myText.$error }}</div> //驗證失敗為false</form>
</div>
</body>
</html> <!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style></style>
<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 ){//reg = "regText", err = {required: false, pattern: true}for(var attr in err){if( err[attr] == true ){$scope[reg].regVal = attr;//$scope[regText].regVal = attr;return;}}$scope[reg].regVal = 'pass';//$scope[regText].regVal = 'pass';
};
}]);</script>
</head><body>
<div ng-controller="Aaa"><form novalidate name="nForm"><div><label>用戶名:</label>//nForm.nText.$error返回的值是{required: false, pattern: true}這種類型<input type="text" name="nText" ng-model="regText.name" required ng-pattern="/^[a-zA-Z]+$/" ng-blur="change('regText',nForm.nText.$error)">//提示信息遍歷出來，|是管道符，filter是過濾器， : 是傳參數(shù)，regText.regVal是傳的參數(shù)，<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 表单校验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《测试驱动数据库开发》—第1章1.2节谁
- 下一篇： Could not create a s