Angularjs使用指令做表单校验
来源:互联网 发布:pc蛋蛋幸运28算法公式 编辑:程序博客网 时间:2024/05/16 14:22
前言
通常,使用angular
做表单验证,一般都是把验证规则单独写为service
,然后通过依赖注入的方式调用。在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service
略显不合适宜,所以可以采用指令的方式。
简易表单
如下为一个简易表单,有四项提示信息,依据状态呈现。校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern
能够实现相同的效果,此处仅为引入指令校验,不做深究。其中,user-validator
为自定义指令。
<form class="form-horizontal" name="form" role="form" ng-controller="ValidCtrl"> <div class="form-group"> <label for="user" class="col-sm-2 control-label" >用户名</label> <div class="col-sm-5"> <input type="text" ng-model="user" name="user" id="user" user-validator class="form-control" required="required"> </div> <label class="col-sm-5" ng-show="form.user.$pristine">请输入用户名</label> <label class="col-sm-5" ng-show="form.user.$error.required && form.user.$dirty"> 用户名不能为空 </label> <label class="col-sm-5" ng-show="form.user.$error.defined && form.user.$dirty"> 用户名不符合规则 </label> <label class="col-sm-5" ng-show="form.user.$valid && form.user.$dirty"> 用户名有效 </label> </div></form>
校验指令
校验指令代码如下:
angular.module('shuffleApp', []) .directive('userValidator', ['$log', function($log) { return { restrict: 'A', require: 'ngModel', link: function($scope, $element, $attrs, $ngModelCtrl) { var verifyRule = [/^\d+$/, /^[a-z]+$/, /^[A-Z]+$/]; var verify = function(input) { return !(verifyRule[0].test(input) || verifyRule[1].test(input) || verifyRule[2].test(input)); }; $ngModelCtrl.$parsers.push(function(input) { var validity = verify(input); $ngModelCtrl.$setValidity('defined', validity); return validity ? input : false; }); $ngModelCtrl.$formatters.push(function(input) { var validity = verify(input); $ngModelCtrl.$setValidity('defined', validity); return validity ? input : false; }) } } }]);
指令内容非常简单,检测是否全为数字,小写字母,大写字母,然后取反即得到校验结果。然后在$parser
, $formatter
内部设置校验结果即可。
联系方式
QQ:491229492
Email: hjj491229492@hotmail.com
0 0
- Angularjs使用指令做表单校验
- angularjs input 表单校验指令整理
- angularjs简单表单校验
- angularJs表单校验
- AngularJS表单校验
- 自定义表单校验指令
- angularjs 表单 指令
- AngularJS 学习笔记(表单校验篇)
- AngularJS 学习笔记(表单校验篇)
- AngularJs轻松入门(六)表单校验
- angularJs表单校验(超级详细!!!)
- angularjs指令的使用
- angularjs 用serviec做数据校验
- Angularjs表单的使用
- angularJS 表单使用
- 让Angularjs外面表单忽略对内嵌表单的校验
- angularjs常用的表单验证指令
- angularJS常用的表单验证指令
- Java中ASC码与字符互相转换
- DedeCMS添加字段提示Invalid utf8 character string错误的解决办法
- angularjs 数据初始化
- textAlign和textBaseline属性集合
- Mini Filter Driver触发Bugcheck D1问题分析
- Angularjs使用指令做表单校验
- 在Windows7上搭建Cocos2d-x win32开发环境-v3.x
- 2014年总结:究竟是什么才能让我飞得更高?
- 2014工作总结
- Android电视机(机顶盒)初次开发的一些经验分享
- 使用fastjson解析json抓取新浪新闻文章
- 斯晨斯夕
- angularjs单页面多Controller示例
- static_cast, dynamic_cast, const_cast探讨