联系我们 - 广告服务
您的当前位置:官网首页 > 资讯 > 热评 >

详解AngularJS中的表单验证(推荐)

来源: 编辑: 时间:2019-10-10
导读: angularjs自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证1.使用angularjs的表单验证正则式验证只需要配置一个正......

angularjs自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证

1.使用angularjs的表单验证

正则式验证

只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成

//javascript
$scope.mobileregx = "^1\d{8}$";
$scope.emailregx = "^[a-z]*@+[\.][a-z]{2,3} 
$scope.pwdregx = "[a-za-z0-9]*";
 div 
 input name="mobile" type="text" ng-model="account.mobile" required ng-pattern="mobileregx"/ 
 span ng-show="registerform.$submitted && registerform.mobile.$error.required" *手机号不能为空 /span 
 span ng-show="registerform.$submitted && registerform.mobile.$error.pattern" *手机号地址不合法 /span 
 /div 
 input type="text" ng-pattern="/[a-za-z]/" / 

数字

设置input的type=number即可

 div 
 label for="password" 
 /label 
 div 
 input required type="number" ng-model="task.estimated_time" name="time" / 
 span 分钟 /span 
 /div 
 span ng-show="newtaskform.$submitted && newtaskform.time.$error.required" *请预估时间 /span 
 /div 

邮箱

 input type="email" name="email" ng-model="user.email" / 

url

 input type="url" name="homepage" ng-model="user.facebook_url" / 

效果

效果是实时的,很带感

2.使用ngmessages验证表单

相对于上面的每个验证都要自己写代码判断,ngmessages提供了一种更为简洁的方式

https://docs.angularjs.org/api/ngmessages/directive/ngmessages

angular.module;
 form name="myform" 
 label 
enter your name:
 input type="text"
name="myname"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required / 
 /label 
 pre myform.myname.$error = {{ myform.myname.$error | json }} /pre 
 !--需要配合 ng-if使用,否则一开始就显示出来了, 你摸了就会触发验证-- 
 div ng-messages="myform.myname.$error" role="alert" ng-if="myform.myname.$touched" 
 div ng-message="required" you did not enter a field /div 
 div ng-message="minlength" your field is too short /div 
 div ng-message="maxlength" your field is too long /div 
 /div 
 /form 

简直是第二次解放啊。。。

2.动态生成的表单的验证

如果你有一部分form的内容是动态生成的,数量和名字都不确定的时候,该如何验证这些生成的元素呢?其实维护一个动态的form本来就是个问题。但是在angular中,只需要记住一点:准备好你的数据,其他的交给angular。像下面这个例子,你只需要维护好一个数组,然后利用ng-repeat就可以快速的呈现到页面上。

其实动态的form和一般的form验证都是一致的,只是动态的form需要使用myform[inout_name].$error的形式访问

 !-- 动态显示状态的负责人 -- 
 div ng-repeat="sta in task.status_table | orderby : sta.sequence_order" 
 label {{sta.status_name}} 负责人 /label 
 select required ng-model="sta.user_id" ng-options="qa.id as qa.last_name+' '+qa.last_name for qa in taskuserlist" name="{{sta.status_name}}" 
 /select 
 div ng-messages="newtaskform[sta.status_name].$error" ng-if="newtaskform.$submitted || newtaskform[sta.status_name].$touched" 
 p ng-message="required" *请选择负责人 /p 
 /div 
 /div 

3. 必填项加亮显

有些表单我们不希望粗暴的在下面添加文字信息提示验证,而是希望更简洁的方式,如:加亮边框,突出显示

需要做的只是在required验证没通过的时候添加class,改变元素的样式即可

 form name="loginform" novalidate ng-submit="loginpost" ng-hide="login" 
 fake-autocomplete /fake-autocomplete 
 div 
 input name="user_name" required maxlength="50" type="text" placeholder="手机号或邮箱" ng-model="account.user_name" ng- 
 /div 
 div 
 input name="password" required type="password" maxlength="50" placeholder="密码" ng-model="account.password" ng-class="{'form-control':1,warn:loginform.$submitted && loginform.password.$error.required}" 
 /div 
 button type="submit" span /span 登录 /button 
 /form 
.warn {
border-color: #f78d8d !important;
outline: 0 !important;
-webkit-box-shadow: inset 0 1px 1px rgba, 0 0 8px rgb !important;
box-shadow: inset 0 1px 1px rgba, 0 0 8px rgba !important;
}
责任编辑:

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:python中fork()函数生成子进程分析
下一篇:没有了

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © 2018 博天堂918国际娱乐博天堂918国际娱乐-搏天堂918娱乐在线 All Rights Reserved Power by DedeCms
本站所有资讯来源于网络 如有侵权请联系QQ:9490489
Top