基于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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
php与js的区别是什么
Aug 05 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
记录vue项目中遇到的一点小问题
May 14 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/11/03 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
php fread函数使用方法总结
2019/05/28 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
一篇.NET面试题
2014/09/29 面试题
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang