基于angularJS的表单验证指令介绍  更新时间:2016年10月21日 09:57:26   投稿:jingxian   下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了。 这里使用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 test 密码长度不能超过16位 密码最短为6 请输入正确的手机号 请输入传真 请输入正确的邮箱 提交 用法2 登录 请输入正确的手机号 请输入手机号 请输入密码 请输入验证码 自动登录 没有账号?立即注册 登录 如此简洁明了 以上就是小编为大家带来的基于angularJS的表单验证指令介绍全部内容了,希望大家多多支持脚本之家~ 您可能感兴趣的文章: AngularJS实现表单验证 AngularJS使用ngMessages进行表单验证 AngularJS中实现用户访问的身份认证和表单验证功能 AngularJS使用angular-formly进行表单验证 AngularJS手动表单验证 AngularJS自动表单验证 AngularJS实现表单验证功能 AngularJS表单验证功能分析 基于AngularJS实现表单验证功能 AngularJS学习笔记之表单验证功能实例详解 AngularJS实现的获取焦点及失去焦点时的表单验证功能示例 angularjs 表单 验证 相关文章 AngularJS中关于ng-class指令的几种实现方式详解 这篇文章给大家介绍了angularJS中ng-class指令的三种实现方式,其中包括通过数据的双向绑定、通过对象数组和通过key/value这三种方式,有需要的朋友们可以参考学习,下面来一起看看吧。 2016-09-09 Angular移动端页面input无法输入的解决方法 下面小编就为大家带来一篇Angular移动端页面input无法输入的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 详解AngularJS 过滤器的使用 AngularJS 过滤器可用于转换数据,这篇文章主要介绍了详解AngularJS 过滤器的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-06-06 详细AngularJs4的图片剪裁组件的实例 本篇文章主要介绍了详细AngularJs4的图片剪裁组件的实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 AngularJS 在同一个界面启动多个ng-app应用模块详解 这篇文章主要介绍了AngularJS 在同一个界面启动多个ng-app应用模块详解的相关资料,需要的朋友可以参考下 2016-12-12 Angular 4环境准备与Angular cli创建项目详解 Angular4.0来了,更小,更快,改动少,所以下面这篇文章主要给大家介绍了关于Angular 4环境准备与学会使用Angular cli创建项目的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。 2017-05-05 jquery操作angularjs对象 这篇文章主要介绍了jquery操作angularjs对象的相关资料,需要的朋友可以参考下 2015-06-06 深入浅析AngularJS中的一次性数据绑定 (bindonce) 这篇文章主要介绍了AngularJS中的一次性数据绑定 (bindonce)知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-05-05 AngularJS基础知识笔记之表格 这篇文章主要介绍了AngularJS基础知识笔记之表格的相关资料,需要的朋友可以参考下 2015-05-05 深入探究angular2 UI组件之primeNG用法 本篇文章主要介绍了深入探究angular2 UI组件之primeNG用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 最新评论

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

这里使用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的表单验证指令介绍全部内容了,希望大家多多支持脚本之家~

您可能感兴趣的文章:

  • AngularJS实现表单验证
  • AngularJS使用ngMessages进行表单验证
  • AngularJS中实现用户访问的身份认证和表单验证功能
  • AngularJS使用angular-formly进行表单验证
  • AngularJS手动表单验证
  • AngularJS自动表单验证
  • AngularJS实现表单验证功能
  • AngularJS表单验证功能分析
  • 基于AngularJS实现表单验证功能
  • AngularJS学习笔记之表单验证功能实例详解
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
张贴在3