AngularJS学习之输入验证

1.AngularJS可以验证表单和控件可以验证输入的数据;

2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的;

 

3.应用实例:

<! DOCTYPE html>

<html>

<script src=http://apps.bding.com/libs/angular.js/1.4.6/angular.min.js></script>

<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>      

<p>用户名:<br>

  <input type="text" name="user" ng-model="user" required>          //ng-model指令用于绑定输入元素到模型中

  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

  <span ng-show="myForm.user.$error.required">用户名是必须的</span></span>

</p>

<p>邮箱:<br>

  <input type="email" name="email" ng-model="email" required>           //模型有两个属性:user和email

  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">

  <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>

  <span ng-show="myForm.email.$error.email">非法的邮箱</span>

  </span>

</p>

<p>

  <input type="submit"

   ng-disabled="myForm.user.$dirty && myForm.uer.$invalid || myForm.email.$dirty && myForm.email.$invalid">

</p>

</form>

<script>

var app=angular.module('myApp',[]);

app.controller('validateCtrl',function($scope){

  $scope.user='John Doe';

  $scope.email='john.doe@gmail.com';

});

</script>

</body>

</html>

 

 

4.验证属性:

**$dirty:表单有填写记录;

**$valid:字段内容合法的;

**$invalid:字段内容是非法的;

**$pristine:表单没有填写记录;

posted @ 2016-11-25 09:32  小春熙子  阅读(203)  评论(0编辑  收藏  举报