基于angularJS的表单验证指令介绍

站长资源 2024/11/16 佚名

46 1538 46

相思资源网 Design By www.200059.com

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

这里使用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="/UploadFiles/2021-04-02/">

如此简洁明了
以上就是小编为大家带来的基于angularJS的表单验证指令介绍全部内容了，希望大家多多支持~

angularjs,表单验证

标签：

angularjs,表单验证

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“基于angularJS的表单验证指令介绍”

暂无基于angularJS的表单验证指令介绍的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

基于angularJS的表单验证指令介绍

angularjs,表单验证

JavaScript高仿支付宝倒计时页面及代码实现

全屏滚动插件fullPage.js使用实例解析

评论“基于angularJS的表单验证指令介绍”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

基于angularJS的表单验证指令介绍

angularjs,表单验证

JavaScript高仿支付宝倒计时页面及代码实现

全屏滚动插件fullPage.js使用实例解析

评论“基于angularJS的表单验证指令介绍”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存