热门关键字:
jquery > jquery教程 > jquery教程 > jquery表单注入验证

jquery表单注入验证

356
作者:管理员
发布时间:2021/6/7 15:21:24
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4896
  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用于禁止h5自带的表单验证,防止多余影响。


  例如:


  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"属性来设置在不同错误时出现不同的提示信息,这样,一个可以验证是否提交的表单就完成了。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐