详解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 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
用PHP实现文件上传二法
2006/10/09 PHP
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
基于jquery循环map功能的代码
2011/02/26 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python多线程编程中的join函数使用心得
2014/09/02 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python学生信息管理系统修改版
2018/03/13 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python 多进程原理及实现
2020/12/21 Python
python实现经典排序算法的示例代码
2021/02/07 Python
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
导游的职业规划书范文
2013/12/27 职场文书
最新离婚协议书范本
2014/08/19 职场文书
三峡大坝导游词
2015/01/31 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
600字作文之感受大自然
2019/11/27 职场文书
Python 如何实现文件自动去重
2021/06/02 Python