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表单验证实现方法详解
  

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

相关推荐