网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

使用AngularJS对表单提交内容进行验证的操作方法

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。它有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证。

成都创新互联公司于2013年开始,是专业互联网技术服务公司,拥有项目成都网站设计、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元桥西做网站,已为上家服务,为桥西各地企业和个人服务,联系电话:18982081108

AngularJS对表单中常用的验证操作

$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息

1.相关插件的导入:AngularJS和Jquery一样,是一种由程序员用js编写好然后封装起来的js插件,因此在使用之前要用以下代码来导入它。

  

注:该js插件最好放在body之后,自己写的js代码则放在AngularJS之后防止产生错误。

2.在导入完AngularJS插件之后,我们首先要在body中创建一个form表单,用于接下来的操作,然后在表单上或者body上加上ng-app=""属性来确定AngularJS的作用域,一般

推荐加在body上。

  

注:ng-controller="ctrl"用于设置控制器。

3.给form表单和input的name属性命名,给form及input设置name后会将form表单信息默认绑定到$scope作用域中,故可以使用formName.inputName.$验证操作 得到验证结果。

novalidata用于禁止h6自带的表单验证,防止多余影响。

例如:

myForm.text.$dirty="true";表单被填写过
myForm.text.$invalid"true";表单输入不合法
myForm.text.$error.required="true";表单必填但未填。

4.给input加上对应的验证:



注:

以上代码对text设置了最小长度4,最大长度10,必填的验证信息,

对email则使用了email自带验证,增加了必填要求,

对password则是设置了正则验证要求是6到18位的字母数字下划线。

5.给提交按钮加上ng-disabled="myForm.$dirty&&myForm.$invalid"属性在表单输入不合法时将按钮禁用来阻止表单内容提交。

注:myForm.$dirty&&myForm.$invalid表示在表单有输入的情况下输入错误。

以上步骤完成之后表单的验证就完成了,也可以加上span的ng-show="myForm.name.$invalid&&myForm.name.$dirty"属性来设置在不同错误时出现不同的提示信息,这样,一个可以验证是否提交的表单就完成了。

以上所述是小编给大家介绍的使用AngularJS对表单提交内容进行验证的操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


当前题目:使用AngularJS对表单提交内容进行验证的操作方法
文章链接:http://bjjierui.cn/article/gcggsp.html

其他资讯