基于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 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
js中Map和Set的用法及区别实例详解
Feb 15 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
无线电的诞生过程
2021/03/01 无线电
php实现ping
2006/10/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP正则验证Email的方法
2015/06/15 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
名片管理系统python版
2018/01/11 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
.net面试题
2016/09/17 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
老师给学生的表扬信
2014/01/17 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
初婚初育证明范本
2014/11/24 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Python 批量下载阴阳师网站壁纸
2021/05/19 Python