AngularJS表单验证实现方法详解
SakuraLu 2016-11-25
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识，希望通过本文的分享，对大家学习AngularJS有所帮助。
1.常规表单验证；
2.AngularJs中提供的表单验证实例。
实例代码
<!doctype html>
<html ng-app="lesson" ng-controller="FormCtrl" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
LESSON 8
</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style>
#content1{padding:16px;}
</style>
</head>
<body>
<form name="myForm" ng-submit="PostForm()" >
<ul>
<li>
<label>用户名：</label><input type="text" name="UserName" ng-model="UserName" ng-pattern="/^\w{8,18}$/" />
<span style="color:red" ng-show="myForm.UserName.$dirty && myForm.UserName.$invalid">
<span>请输入8到18位的用户名</span>
</span>
</li>
<li>
<label>编号</label><input type="text" name="UserIndex" ng-model="UserIndex" ng-pattern="/^\d+$/" />
<span style="color:red;" ng-show=" myForm.UserIndex.$dirty && myForm.UserIndex.$invalid ">
请输入您的数字编号
</span>
</li>
<li>
<input ng-disabled="myForm.$invalid" type="submit" value="提交" />
</li>
</ul>
</form>
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
var app = angular.module("lesson",[]);
app.controller("FormCtrl",function($scope){
$scope.myForm={};
$scope.UserName = 'Tom';
$scope.PostForm=function(){
console.log($scope.myForm);
}
});
</script>
</body>
</html>
执行结果：
相关推荐
angularJS中提供了许多的验证指令，可以轻松的实现验证，只需要在表单元素上添加相应的ng属性，常见的如下所示：。<input Type="text" ng-model="" [name="&qu
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：。<input type="text" ng-pattern="/[a-zA-Z]/&quo
验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：。<input type="text" ng-pattern="/[a-zA-Z]/&quo