华山资源网

使用AngularJS对表单提交内容进行验证的操作方法
网络编程 2024/11/18 佚名
3 1

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

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

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

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

 <script src="/UploadFiles/2021-04-02/angular.js">


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


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


推荐加在body上。





 <body ng-app="app" ng-controller="ctrl"></body> 





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


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





<form class="form-horizontal" name="myForm" novalidate>
  <input type="text" name="name" >
  <input type="email" name="mail">
  <input type="password" name="pwd" >
</form>





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


例如：





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





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





<input type="text" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{erro:myForm.name.$invalid&&myForm.name.$dirty}"/>
<input type="email" name="mail" required />
<input type="password" name="pwd" ng-model="user.pwd" pattern="^\w{6,18}$"/>





注：


以上代码对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对表单提交内容进行验证的操作方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com