AngularJS表单验证实现方法详解

本文主要是通过源码实例和大家分享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>

执行结果：

原文链接：http://www.maiziedu.com/wiki/angularjs/prove/