码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS表单验证实现方法详解

时间:2016-11-25 20:26:40      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:blank   学习   nbsp   com   提交   rip   相关   sso   isa   

    本文主要是通过源码实例和大家分享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>请输入818位的用户名</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/

AngularJS表单验证实现方法详解

标签:blank   学习   nbsp   com   提交   rip   相关   sso   isa   

原文地址:http://www.cnblogs.com/maizi008/p/6102668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!