基于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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
全屏滚动插件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
ThinkPHP之M方法实例详解
2014/06/20 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
python中PIL安装简单教程
2016/04/21 Python
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
解决python运行启动报错问题
2020/06/01 Python
python 5个实用的技巧
2020/09/27 Python
python实现猜拳游戏项目
2020/11/30 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
保研推荐信范文
2015/03/25 职场文书
放假通知格式
2015/04/14 职场文书
python如何读取.mtx文件
2021/04/22 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
Java完整实现记事本代码
2022/06/16 Java/Android