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为错误的

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