基于angularJS的表单验证指令介绍


Posted in Javascript onOctober 21, 2016

做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了。

这里使用AngularJS的指令进行处理代码及其简洁明了

下面是指令JS代码

app.directive('ccForm',['$parse',function ($parse) {
  return {
    restrict:'A',
    link:function (scope,element,attrs) {
      var first=true;
      var errors=0;
      var checkInterval;
      function showError(input,errorIndex) {
        if(first){
          errors++;
          $parse(element.attr('cc-form')).assign(scope,false);
          refreshScope(scope);
          return;
        }
        input.addClass('hasError');
        input.closest('.form-group').addClass('hasError');
        input.next('.help-block').find('.cc-show').removeClass('cc-show');
        input.next('.help-block').find('[cc-error-'+errorIndex+']').addClass('cc-show');
        input.closest('.form-group').next('.help-block').find('.cc-show').removeClass('cc-show');
        input.closest('.form-group').next('.help-block').find('[cc-error-'+errorIndex+']').addClass('cc-show');
      }
      function hidError(input,errorIndex) {
        errors--;
        if(errors==0){
          $parse(element.attr('cc-form')).assign(scope,true);
          refreshScope(scope);
        }
        input.removeClass('hasError');
        input.closest('.form-group').removeClass('hasError');
        input.next('.help-block').find('[cc-error-'+errorIndex+']').removeClass('cc-show');
        input.closest('.form-group').next('.help-block').find('[cc-error-'+errorIndex+']').removeClass('cc-show');
      }
      function checkInput(input) {
        var that=$(input);
        // $('[cc-email]')[0].attributes[0].name
        var attrs=input.attributes;
        var value=that.val();
        for(var i=0,attr;attr=attrs[i];i++){
          if(attr.name=='cc-email'){
            if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)){
              hidError(that,attr.value)
            }else{
              showError(that,attr.value);
              break;
            }
          }else if(attr.name=='cc-phone'){
            if(/\d{11}/.test(value)){
              hidError(that,attr.value);
            }else {
              showError(that,attr.value);
              break;
            }
          }else if(attr.name=='cc-max'){
            if(value.length>attr.value){
              showError(that,that.attr(attr.name+'-error'));
              break;
            }else {
              hidError(that,that.attr(attr.name+'-error'));
            }
          }else if(attr.name=='cc-min'){
            if(value.length<attr.value){
              showError(that,that.attr(attr.name+'-error'));
              break;
            }else {
              hidError(that,that.attr(attr.name+'-error'));
            }
          }else if(attr.name=='cc-regex'){
            var patten=new RegExp(attr.value);
            if(patten.test(value)){
              hidError(that,that.attr(attr.name+'-error'));
            }else {
              showError(that,that.attr(attr.name+'-error'));
              break;
            }
          }else if(attr.name=='cc-require'){
            if(!value||value.trim()==''){
              showError(that,attr.value);
              break;
            }else {
              hidError(that,attr.value);
            }
          }
        }
      }
      function checkForm(form) {
        form.find('input,textarea').each(function () {
          checkInput(this);
        });
      }
      element.find('input,textarea').focus(function (e) {
        var that=this;
        first=false;
        checkInterval=setInterval(function () {
          checkInput(that);
        },500);
      });
      element.find('input,textarea').blur(function (e) {
        first=false;
        checkInput(this);
        clearInterval(checkInterval);
      });
      element.find('[cc-submit]').click(function (e) {
        first=false;
        clearInterval(checkInterval);
        checkForm(element);
      });
      //预检测时不显示错误提示
      checkForm(element);
    }
  }
}]);

对应的需要一点点CSS代码,下面是用LESS写的

.help-block {
 * {
  &:not(.cc-show) {
   display: none;
  }
 }
}

对应的CSS就是

.help-block *:not(.cc-show) {
  display: none;
}

用法1

<div>
  <h1>test</h1>
  <form cc-form="form1">
    <div class="from-group">
      <input type="password" ng-model="user.password" cc-max="16" cc-max-error="1" cc-min="6" cc-min-error="2">
      <div class="help-block">
        <p cc-error-1>密码长度不能超过16位</p>
        <p cc-error-2>密码最短为6</p>
      </div>
    </div>
    <div class="form-group">
      <input ng-model="user.phone" cc-regex="\d{11}" cc-regex-error="1">
      <div class="help-block">
        <p cc-error-1>请输入正确的手机号</p>
      </div>
    </div>
    <div class="form-group">
      <input ng-model="user.fax" cc-require="1">
      <div class="help-block">
        <p cc-error-1>请输入传真</p>
      </div>
    </div>
    <div class="form-group">
      <input ng-model="user.email" cc-email="1">
      <div class="help-block">
        <p cc-error-1>请输入正确的邮箱</p>
      </div>
    </div>
    <button type="button" cc-submit>提交</button>
  </form>
</div>

用法2

<form class="form shadow-box" cc-form="form1">
    <h3>登录</h3>
    <div class="form-group">
      <div class="cellphone">
        <input placeholder="手机号" ng-model="user.loginName" name="loginName" cc-regex="\d{11}" cc-regex-error="1" cc-require="2"/>
      </div>
    </div>
    <div class="help-block">
      <p cc-error-1>请输入正确的手机号</p>
      <p cc-error-2>请输入手机号</p>
    </div>
    <div class="form-group">
      <div class="password">
        <input placeholder="密码" type="password" ng-model="user.password" name="password" cc-require="1"/>
      </div>
    </div>
    <div class="help-block">
      <p cc-error-1>请输入密码</p>
    </div>
    <div class="form-group">
      <div class="vcode">
        <input placeholder="验证码" ng-model="user.vcode" name="vcode" cc-require="1">
        <img src="">
      </div>
    </div>
    <div class="help-block">
      <p cc-error-1>请输入验证码</p>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="user.rememberPass" ng-true-value="true" ng-false-value="false">自动登录
      </label>
    </div>
    <p class="to-register">没有账号?<a href="#/main/register">立即注册</a></p>
    <button type="button" ng-click="login(1)" cc-submit>登录</button>
  </form>

如此简洁明了

以上就是小编为大家带来的基于angularJS的表单验证指令介绍全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 #Javascript
connection reset by peer问题总结及解决方案
Oct 21 #Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 #Javascript
js制作支付倒计时页面
Oct 21 #Javascript
浅谈javascript中的三种弹窗
Oct 21 #Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 #Javascript
AngularJS 与百度地图的结合实例
Oct 20 #Javascript
You might like
php实现用户在线时间统计详解
2011/10/08 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php实现天干地支计算器示例
2014/03/14 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
mouse_on_title.js
2006/08/25 Javascript
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
微信小程序 聊天室简单实现
2017/04/19 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
迪奥官网:Dior.com
2018/12/04 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
python for循环赋值问题
2021/06/03 Python
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Redis高并发缓存架构性能优化
2022/05/15 Redis