基于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 解析json的代码
Dec 16 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
vue 实现单选框设置默认选中值
Nov 07 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适配器模式(Adapter)
2014/11/25 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
cookie的secure属性详解
2015/04/08 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
工作证明格式范文
2015/06/15 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang