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>


执行结果:


prove.png



本课小结


1.表单的验证,看看表单验证中的问题;


2.AngularJs表单开发(表单验证);


3.常规表单验证;


4.AngularJs中提供的表单验证实例。



作业


编写一个在表单中输入邮箱地址验证。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部