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


Posted in Javascript onNovember 17, 2016

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

1.使用angularjs的表单验证

正则式验证

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

//javascript
$scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$";
$scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$";
$scope.pwdRegx = "[a-zA-Z0-9]*";
<div class="form-group">
<input class="form-control" name="mobile" type="text" ng-model="account.mobile" required ng-pattern="mobileRegx"/>
<span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.required">*手机号不能为空</span>
<span class="error" ng-show="registerForm.$submitted && registerForm.mobile.$error.pattern">*手机号地址不合法</span>
</div>
<input type="text" ng-pattern="/[a-zA-Z]/" />

数字

设置input的type=number即可

<div class="form-group col-md-6">
<label for="password">
预估时间
</label>
<div class="input-group">
<input required type="number" class="form-control" ng-model="task.estimated_time" name="time" />
<span class="input-group-addon">分钟</span>
</div>
<span class="error" 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" />

效果

效果是实时的,很带感

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

2.使用ngMessages验证表单

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

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

angular.module('ngMessagesExample', ['ngMessages']);
<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" style="color:maroon" 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>

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

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

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

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

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

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

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

<!-- 动态显示状态的负责人 -->
<div class="form-group col-md-6" ng-repeat="sta in task.status_table | orderBy : sta.sequence_order">
<label>{{sta.status_name}} 负责人</label>
<select required class="form-control" 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 class="error" ng-message="required">*请选择负责人</p>
</div>
</div>

3. 必填项加亮显

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

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

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

<form name="loginForm" novalidate ng-submit="loginPost()" class="navbar-form navbar-right" ng-hide="login">
<fake-autocomplete></fake-autocomplete>
<div class="form-group">
<input name="user_name" required maxlength="50" type="text" class="form-control" placeholder="手机号或邮箱" ng-model="account.user_name" ng-class="{warn:loginForm.$submitted && loginForm.user_name.$error.required}">
</div>
<div class="form-group">
<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" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span> 登录</button>
</form>
.warn {
border-color: #f78d8d !important;
outline: 0 !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgb(239, 154, 154) !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(239, 154, 154) !important;
}

以上所述是小编给大家介绍的详解AngularJS中的表单验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
js动态引入的四种方法
May 05 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 #Javascript
用Vue.js实现监听属性的变化
Nov 17 #Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 #Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 #Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 #Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 #Javascript
leaflet的开发入门教程
Nov 17 #Javascript
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
答题辅助python代码实现
2018/01/16 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
幼儿园家长评语大全
2014/04/16 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书