详解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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
vuex的简单使用教程
2018/02/02 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
关于vue面试题汇总
2018/03/20 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
元宵节晚会主持人串词
2014/03/25 职场文书
校园活动策划方案
2014/06/13 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年教研员工作总结
2014/12/23 职场文书