AngularJS 输入验证

AngularJS表单和控件可提供验证功能,并对用户输入的非法数据进行警告。

实例:

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<h2>输入验证示例</h2>
<form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
  <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>
  <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.user.$invalid||myForm.email.$dirty&&myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', 
    function($scope) {
    $scope.user = 'Sherlock Holmes';
    $scope.email = 'Sherlock_Holmes@gmail.com';
});
</script>
</body>
</html>

运行案例

说明:AngularJS  ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性: user 和 email。

使用了ng-show指令, color:red 在邮件的 $dirty 或 $invalid 都为 true 时才显示。


本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信