未加星标

AngularJS表单验证中级篇(3)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

目录

基本验证
验证插件messages
自定义验证 

基本验证

<form name="form" novalidate ng-app>
<span>{{form.$invalid}}</span>
<span>{{form.$valid}}</span>
<span>{{form.$dirty}}</span>
<span>{{form.$pristine}}</span>
<input type="text" ng-model="user" required />
<input type="text" ng-model="pwd" required minlength="4" ng-maxlength="5" />
<input type="text" ng-model="phone" required ng-pattern="/1[3|5|7|8|][0-9]{9}/" />
<input type="email" ng-model="email" required />
<input type="url" ng-model="url" required />
<input type="number" ng-model="number" required />
<div>
<button type="reset" ng-disabled="form.$pristine">重置</button>
<button type="submit" ng-disabled="form.$invalid">提交</button>
</div>
</form>

以上展示了基本的ng验证.

这里重点介绍一下上面的特例:

novalidate:禁用H5自带的验证

ng-maxlength: 如果不写ng,maxlength则直接限制最多输入字符,稍微有点区别(IE9 + Chrome 测试)

ng-pattern:通过正则验证,如果不写ng开头,无验证效果.

注:要启用验证 同时需要绑定一个ng-model 

AngularJS表单验证中级篇(3)

访问表单属性

---方位表单: <form name>.<angular property>

---访问一个输入框: <form name>.<input name>.<angular property> 

验证插件

在介绍messages插件之前,我们看下本来的验证提示

<form name="form" ng-app novalidate>
<span>{{form.user.$error.required?'user该项必填':''}}</span>
<input type="text" ng-model="user" name="user" required />
<span>{{form.pwd.$error.required?'pwd该项必填':''}}</span>
<input type="text" ng-model="pwd" name="pwd" required />
<span>{{form.info.$error.required?'info该项必填':''}}</span>
<input type="text" ng-model="info" name="info" required />
<span>{{form.age.$error.required?'age该项必填':''}}</span>
<input type="text" ng-model="age" name="age" required />
<div>
<button type="submit" ng-disabled="form.$invalid">提交</button>
</div>
</form>

AngularJS表单验证中级篇(3)

这里只是判断了require 当我们的代码 我们重复写了很多3元表达式 

messages插件就是更友好的解决重复的问题

<form name="form" ng-app="myApp" novalidate>
<input type="email" ng-model="user" name="username" required minlength="4" />
<div ng-messages="form.username.$error" ng-messages-multiple>
<div ng-message="required">该项必填</div>
<div ng-message="minlength">低于最低长度</div>
<div ng-message="email">应为email</div>
</div>
</form>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-messages.min.js"></script>
<script>
angular.module('myApp', ['ngMessages']);
</script>

Nuget:Install-Package AngularJS.Messages

自定义验证

通过基本的验证方式,我们已经能够解决大部分的验证问题.但项目中永远充满着各种各样的需求.

在ng中的自定义验证,一般通过指令的形式创建.

<form name="form" ng-app="myApp" novalidate>
<input type="email" ng-model="user" name="username" required ensure-unique minlength="4" />
<div ng-messages="form.username.$error" ng-messages-multiple>
<div ng-message="required">该项必填</div>
<div ng-message="minlength">低于最低长度</div>
<div ng-message="email">应为email</div>
<div ng-message="unique">用户名已存在</div>
</div>
</form>

在上面的messages插件Demo中,新建一行验证用户名已存在 以及 在input上添加了ensure-unique指令

同时,我们需要在js中定义ensure-unique指令:

angular.module('myApp', ['ngMessages']).directive('ensureUnique', ['$http', '$timeout', '$window', function ($http, $timeout, $window) {
return {
restrict: "A",
require: 'ngModel',
link: function (scope, ele, attrs, ngModelController) {
scope.$watch(attrs.ngModel, function (n) {if (!n) return;$timeout.cancel($window.timer);$window.timer = $timeout(function () { $http({ method: 'get', url: '/api/checkusername/', //根据换成自己的url params: { "username": n } }).success(function (data) { ngModelController.$setValidity('unique', data.isUnique); //这个取决于你返回的,其实就是返回一个是否正确的字段,具体的这块可以自己修改根据自己的项目 }).error(function (data) { ngModelController.$setValidity('unique', false); });}, 500);
});
}
};
}]);

指令不是本节重点内容,这里简单说下

ngModelController.$setValidity('unique', bool);

通过该API可以设置$error.unique.

setValidity为true,则$error.unique为false

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AngularJSChrome其实需求
分页:12
转载请注明
本文标题:AngularJS表单验证中级篇(3)
本站链接:http://www.codesec.net/view/484117.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(26)