详解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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
Openlayers实现测量功能
Sep 25 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
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python Series从0开始索引的方法
2018/11/06 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python中什么是面向对象
2020/06/11 Python
深入了解NumPy 高级索引
2020/07/24 Python
就业推荐自我鉴定
2013/10/06 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
幼儿教师培训感言
2014/03/08 职场文书
政治表现评语
2014/05/04 职场文书
团支部推优材料
2014/05/21 职场文书
大学生村官考核材料
2014/05/23 职场文书
明星员工获奖感言
2014/08/14 职场文书
装修活动策划方案
2014/08/27 职场文书
2019求职信大礼包
2019/05/15 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs