AngularJS表单验证中级篇(3)
目录
基本验证验证插件信息自定义验证
基本验证
表单名称=' form ' novalidate ng-app span { { form } .$无效}}/span span{{form .$valid}}/span span{{form .$dirty}}/span span{{form .$ purify } }/span输入类型='text' ng-model='user '必需/输入类型='text' ng-model='pwd '必需minlength='4' ng-maxlength='5' /输入类型='text' ng-model='phone '必需ng-pattern='/1[3 | 5 | 7 | 8 |][0-9]{ 9 }/'输入类型='email' ng-model='email '必需/输入类型='url' ng-model='url '必需/输入类型='原始的重置/button button type=' submit ' ng-disabled=' form ." $无效"提交/按钮/div/表单以上展示了基本的尼日利亚验证。
这里重点介绍一下上面的特例:
novalidate:禁用H5自带的验证
ng-maxlength:如果不写ng,最大长度则直接限制最多输入字符,稍微有点区别(IE9 Chrome测试)
ng-pattern:通过正则验证,如果不写尼日利亚开头,无验证效果。
注:要启用验证同时需要绑定一个尼日利亚模型
访问表单属性
-方位表单:表单名称。有角的属性
-访问一个输入框:表单名称。输入名称。角度属性
验证插件
在介绍信息插件之前,我们看下本来的验证提示
表单名称=' form ' ng-app novalidate span { { form }。用户。$错误。必需的?用户该项必填:''}}/span输入类型=' text ' ng-model=' user ' name=' user '必填/span { { form。pwd。$错误。必需的?显示当前工作目录该项必填:''}}/span输入类型='text' ng-model='pwd' name='pwd '必填/span { { form。信息。$错误。必需的?信息该项必填:''}}/span输入类型=' text ' ng-model=' info ' name=' info '必填/span { { form。年龄。$错误。必需的?年龄该项必填:''}}/span输入类型='text' ng-model='age' name='age '必填/div按钮类型='提交' ng-disabled='表单." $无效"提交/按钮/分区/表格
这里只是判断了需要当我们的代码我们重复写了很多3元表达式
信息插件就是更友好的解决重复的问题
表单名称=' form ' ng-app=' myApp ' novalidate输入类型=' email ' ng-model=' user ' name=' username '必填最小长度=' 4 '/div ng-messages=' form。用户名。$ error ' ng-messages-多个div ng-message='必填'该项必填/div/ng-消息='minlength '低于最低长度/div/ng-消息='电子邮件'应为email/div/div/form script src=' http : script/angular。量滴js '/script script src=' http : script/angular-messages。量滴js '/脚本脚本角度。模块(' myApp ',[' ngMessages ']);/scriptnuget:安装-软件包AngularJS .信息
自定义验证
通过基本的验证方式,我们已经能够解决大部分的验证问题。但项目中永远充满着各种各样的需求。
在尼日利亚中的自定义验证,一般通过指令的形式创建。
表单名称=' form ' ng-app=' myApp ' novalidate输入类型=' email ' ng-model=' user ' name=' username '必需确保-唯一最小长度=' 4 '/div ng-messages=' form。用户名。$ error ' ng-消息-多个' div ng-message='必需'该项必填/div/ng-消息='minlength '低于最低长度/div/ng-消息='电子邮件'应为电子邮件/div-div消息='唯一'用户名已存在/div/表单在上面的信息插件演示中,新建一行验证用户名已存在以及在投入上添加了确保-唯一指令
同时,我们需要在射流研究…中定义确保-唯一指令:
angular.module('myApp ',['ngMessages']).指令(' ensureUnique ',['$http ',' $timeout ',' $window ',函数($http,$timeout,$ window){ return { restrict : ' A ',require: ' ngModel ',link:函数(scope,ele,attrs,ngModelController) { scope .$watch(attrs.ngModel,function (n) { if(!n)返回;$暂停。取消($ window)。计时器);$窗口。timer=$ time out(function(){ $ http({ method : ' get ',url: '/api/checkusername/',//根据换成自己的全球资源定位器(Uniform Resource Locator)参数: { 'username': n } }).成功(函数(数据){ ngModelController .$ setvalidation('唯一',数据。ISU nique);//这个取决于你返回的,其实就是返回一个是否正确的字段,具体的这块可以自己修改根据自己的项目}).错误(函数(数据){ ngModelController .$ SetValidation('唯一,假);});}, 500);});} };}]);指令不是本节重点内容,这里简单说下
ngModelController .$ SetValidation(' unique ',bool);
通过该应用程序接口可以设置$error.unique .
设置有效性为没错,则$error.unique为错误的
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:AngularJS表单验证中级篇(3)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。