基本验证

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

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

novalidate:禁用H5自带的验证

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

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

注:

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

访问表单属性

---方位表单:

---访问一个输入框: ..

验证插件

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

{{form.user.$error.required?'user该项必填':''}} {{form.pwd.$error.required?'pwd该项必填':''}} {{form.info.$error.required?'info该项必填':''}} {{form.age.$error.required?'age该项必填':''}}

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

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

required">该项必填

Nuget:Install-Package AngularJS.Messages

自定义验证

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

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

required">该项必填

用户名已存在

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

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

修改根据自己的项目 }).error(function (data) { ngModelController.$setValidity('unique',false); }); },500); }); } }; }]);

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

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

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

setValidity为true,则$error.unique为false

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

表单验证

上一篇：iOS和Android用同一个二维码实现跳下一篇：js创建对象几种方式的优缺点对比

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

AngularJS表单验证中级篇（3）

目录

基本验证

注:

验证插件

自定义验证

猜你在找的JavaScript相关文章