资讯专栏INFORMATION COLUMN

AngularJS表单验证

shenhualong / 2179人阅读

摘要:表单和其中的表单控件提供了验证服务,可以让用户在提交一般在点击类型为的按钮时提交表单前意识到自己有非法不符合要求,以下都将称为非法的输入。为了编写一个可靠的应用程序,服务端验证是不可或缺的。促发条件至于自定义表单验证,我会另写一篇。

表单

网页中用户于服务端交互数据的表单控件有input、select、textarea,而表单是将为了达到一个目的(登录、注册等)各种控件整合到一起的一个集合。
表单和其中的表单控件提供了验证服务,可以让用户在提交(一般在点击类型为submit的按钮时提交)表单前意识到自己有非法(不符合要求,以下都将称为非法)的输入。这种验证方式(客户端验证)提供了比多带带的服务端验证更好的用户体验,因为用户在输入后得到实时的反馈,修正输入的信息。
但是虽然说客户端验证提供了更好的用户体验,但是服务端验证也是不可或缺的,因为客户端验证并不可靠而且很容易被绕过。为了编写一个可靠的应用程序,服务端验证是不可或缺的。

基础的表单

用于理解双向数据绑定的关键指令是ngModel(指令在视图中使用时需要将大写字母装换为-x,例如ng-model),ngModel(ngBind)指令提供了模型与视图之间的双向数据绑定的方法。另外,ngModel为其他指令扩展其行为提供了API(应用程序编程接口)。

  
    
  
        user:{{ user | json }}  
    
  
        User:{{ User | json }}  
    

这里有几个需要注意的点:

novalidate是用来禁用浏览器自带的验证。

ngModel的值不会被设置,直到通过了控件的验证,比如说type=email必须为xxx@xxx的形式,可以仔细看下方user中email字段的变化。

建议不要使用type=reset的按钮,会将输入框清空,但不会重置数据模型中的值,原因未知。

使用css样式

在不同的验证状态下,ngModel为控件和表单提供了一些css类(需要在样式表中声明):

ng-valid:数据模型合法

ng-invalid:数据模型不合法

ng-valid-[key]:每一个通过$setValidity添加的合法键

ng-invalid-[key]:每一个通过$setValidity添加的不合法的键

ng-pristine:还没有与用户交互(输入过)的控件

ng-dirty:与用户交互过的控件

ng-touched:失去过焦点的控件(鼠标点上去获得,点其他地方失去)

ng-untouched:没有失去过焦点的控件

ng-pending:任何没有结束(与服务端交互)的异步验证

这里简单的演示ng-invalid和ng-touched
html:

css:

.ng-invalid.form-control {  
border-color: #E96666;  
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(233, 102, 102, 0.6)  
}  
.ng-touched.form-control {  
border-color: #66E985;  
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 233, 160, 0.6)  
}  

第一个输入框因为是必须的,所以是非法的状态,所以angular会给这个控件添加ng-invalid样式,在输入后变为合法,该样式去除,在失去焦点后ng-touched样式添加

简单的根据表单的状态显示不同的信息

表单是FormController的一个实例,我们可以用表单的name属性将表单暴露到作用域中。
相似的,一个有数据绑定(有ngModel)的表单控件也是NgModelController的实例,也可以通过表单实例的属性(控件的name)暴露到作用域中。
我们可以通过这个特性扩展我们上一个例子:

在用户与表单控件交互后再展示错误信息

在用户点击提交之后再展示错误信息

注意! 姓名不能为空

注意一下,$submitted表示是否点击过提交(type=submit)按钮,开发遇到问题的时候,大家也可以把$error打印出来看下,表单和表单中的控件都有$error对象,这里我都打印出来了

换种方式触发更新模板数据

在默认情况下,对数据的任何改变都会促发模板的更新和表单验证。我们可以使用ngModelOptions指令去重写这个行为,使只有在特定的条件下才触发。
比如说

ng-model-options="{ updateOn: "blur" }"  

会只在表单控件失去焦点时触发,我们也可以设置多个事件来触发,只要使用空格隔开即可

ng-model-options="{ updateOn: "mousedown blur" }"  

如果想把原有的保存,只是想加一个触发条件的话,可以加上default在列表中

ng-model-options="{ updateOn: "default blur" }"  

一个完整点的例子:
html:

促发条件: blur

{{ user.name }}

正常

{{ user.phone }}
延迟的数据绑定

我们可以通过ngModelOptions的debounce 关键字来使数据绑定延迟,这个延迟对解析器,验证和表单的属性($dirty,$pristine等)都会生效。
写法也很简单

ng-model-options="{ debounce: 500 }"  

ngModelOptions是可以继承的,所以如果有多个控件都需要这个效果,可以在他们的父元素上添加这个指令,除非子元素重写这个属性。

促发条件: blur

{{ user.name }}

至于自定义表单验证,我会另写一篇。刚开博客没多久,希望大家有任何问题或者意见都在下方提出,或者加我qq 651882883。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54359.html

相关文章

  • AngularJs功能(八)--表单验证

    摘要:表单验证表单验证是一项重要的功能,能保证我们的应用不会被恶意或错误的输入破坏。给加上意味着表单的名称是。验证提示这是在版本之后对表单验证的优化。 表单验证 表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用,进而在客户端验证时提供表单状态...

    zhaochunqi 评论0 收藏0
  • ngVerify - 更高效的 AngularJS 表单验证

    ngVerify v1.5.6 a easy AngularJS Form Validation plugin.简洁高效的__表单验证插件__ See how powerful it.看看它有多强大 动态校验 自动关联提交按钮 多种 tip 校验消息提示 不只校验 dom 元素值,还可以校验 ngModel 数据模型 支持任意类型表单元素,甚至可以校验非表单元素 提供 type 类型校验模板...

    shiina 评论0 收藏0
  • angular表单验证

    摘要:如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加标记。如果未修改,值为,如果修改过值为修改过的表单只要用户修改过表单,无论输入是否通过验证,该值都返回合法的表单这个布尔型的属性用来判断表单的内容是否合法。 借助AngularJS,我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然 Web应用安全不能完全依赖客户端验证,但客户端验证可以提供表单状态的实时反馈。 ...

    Cristalven 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<