前端开发 · 2011年9月19日 0

Jquery通用表单验证类

好吧,最近写js写的蛋疼,其实我是一枚php程序猿啊。。其实说白了,有点抄袭CI里面的表单验证类的意思,因为用法很像

/**
* 通用js验证类
* by 废墟
* https://anerg.com
*/
var Validator = {
  label:{
    'username':'帐号',
    'password':'密码',
    'passconf':'密码确认',
    'email':'Email',
    'vcode':'验证码',
    'author':'笔名',
    'truename':'真实姓名',
    'qq':'QQ',
    'idcard':'身份证号码',
    'tel':'电话',
    'zipcode':'邮编',
    'address':'联系地址'
  },
  trim:function(item) {
    this.Value = $.trim(this.Value);
    item.val(this.Value);
  },
  require:function(item) {
    if(this.Value == '') {
      this.ErrorMessage[item.attr('name')] = '这是必填项,麻烦您啦^_^';
      return false;
    } else {
      return true;
    }
  },
  min_length:function(item, len) {
    if(this.getStrActualLen(this.Value) < len) {
      this.ErrorMessage[item.attr('name')] = '太短啦。必须超过'+len+'个字符';
      return false;
    } else {
      return true;
    }
  },
  max_length:function(item, len) {
    if(this.getStrActualLen(this.Value) > len) {
      this.ErrorMessage[item.attr('name')] = '太长啦。不能超过'+len+'个字符';
      return false;
    } else {
      return true;
    }
  },
  matches:function(item, filed) {
    var v = $("input[name='"+filed+"']:visible").val();
    if(v != this.Value) {
      this.ErrorMessage[item.attr('name')] = '两次输入的'+this.label[filed]+'不一致 :(';
      return false;
    } else {
      return true;
    }
  },
  email:function(item) {
    var re = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    if(!re.test(this.Value)) {
      this.ErrorMessage[item.attr('name')] = "格式不正确呀,请检查一下";
      return false;
    } else {
      return true;
    }
  },
  qq:function(item) {
    var re = /^[0-9]{5,11}$/;
    if(!re.test(this.Value)) {
      this.ErrorMessage[item.attr('name')] = "格式不正确呀,请检查一下";
      return false;
    } else {
      return true;
    }
  },
  vcode:function(item) {
    var re = /^\d{4}$/;
    if(!re.test(this.Value)) {
      this.ErrorMessage[item.attr('name')] = "验证码错误";
      return false;
    } else {
      return true;
    }
  },
  idcard:function(item) {
    var re = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
    if(!re.test(this.Value)) {
      this.ErrorMessage[item.attr('name')] = "格式不正确呀,请检查一下";
      return false;
    } else {
      return true;
    }
  },
  checkusername:function(item) {
    var _stat = true;
    var _this = this;
    $.ajax({
      async:false,
      type:'POST',
      url:'/ajax/checkusername',
      data:"username="+this.Value,
      dataType:'text',
      success:function(rs) {
        if(rs == 1) {
          _this.ErrorMessage[item.attr('name')] = '呃,已经被别人用了';
          _stat = false;
        } else if(rs == 9) {
          _this.ErrorMessage[item.attr('name')] = '换一个吧。Sorry :(';
          _stat = false;
        } else {
          _stat = true;
        }
      }
    });
    return _stat;
  },
  userexists:function(item) {
    var _stat = true;
    var _this = this;
    $.ajax({
      async:false,
      type:'POST',
      url:'/ajax/checkusername',
      data:"username="+this.Value,
      dataType:'text',
      success:function(rs) {
        if(rs == 1 || rs == 9) {
          _stat = true;
        } else {
          _this.ErrorMessage[item.attr('name')] = '帐号不存在';
          _stat = false;
        }
      }
    });
    return _stat;
  },
  checkauthor:function(item) {
    var _stat = true;
    var _this = this;
    $.ajax({
      async:false,
      type:'POST',
      url:'/ajax/checkauthor',
      data:"author="+this.Value,
      dataType:'text',
      success:function(rs) {
        if(rs == 1) {
          _this.ErrorMessage[item.attr('name')] = '呃,已经被别人用了';
          _stat = false;
        } else if(rs == 9) {
          _this.ErrorMessage[item.attr('name')] = '换一个吧。Sorry :(';
          _stat = false;
        } else {
          _stat = true;
        }
      }
    });
    return _stat;
  },
  Items:[],
  ErrorMessage:[],
  Value:'',
  Validate:function(theItem) {
    if(typeof(theItem) != 'undefined') {
      this.Items = [];
      this.ErrorMessage = [];
      var valid = theItem.attr('valid');
      if(typeof(valid) != 'undefined') {
        this.Items[theItem.attr('name')] = theItem;
        this.Value = theItem.val();
        var method = valid.split('|');
        for(var i in method) {
          var re = /(.*)\[(.*[^\]])\]$/;
          if(re.test(method[i])) {
            var tmp = method[i].match(re);
            if(typeof(this[tmp[1]]) == 'function' && this[tmp[1]](theItem, tmp[2]) == false)
              break;
          } else {
            if(typeof(this[method[i]]) == 'function' && this[method[i]](theItem) == false)
              break;
          }
        }
        
        showNotice(this.Items, this.ErrorMessage);//显示错误或者正确提示。这个方法得自己写
        
        if(this.count(this.ErrorMessage) > 0) {
          return false;
        } else {
          return true;
        }
      }
    }
  },
  count:function(obj) {
    var counter = 0;
    for(i in obj) counter++;
    return counter;
  },
  getStrActualLen:function(sChars){
    sChars = $.trim(sChars);
    var len = 0;
    for(i=0;i<sChars.length;i++){
      iCode = sChars.charCodeAt(i);
      if((iCode>=0 && iCode<=255)||(iCode>=0xff61 && iCode<=0xff9f)){
        len += 1;
      }else{
        len += 2;
      }
    }
    return len;
  }
}

 

一般来说,还需要下面两个js函数,不过这俩你得根据自己需要来修改了

function showNotice(objs, msgs) {
  for(i in objs) {
    clearNotice(objs[i]);//清除提示信息
    if(typeof(msgs[i]) != 'undefined') {
      objs[i].parents('dd').addClass('wrong');
      objs[i].after('<div class="wrong_tip">'+msgs[i]+'</div>');
    } else {
      objs[i].parents('dd').addClass('correct');
      objs[i].after('<div class="ok">&nbsp;&nbsp;</div>');
    }
  }
}
function clearNotice(obj) {
  obj.parents('dd').removeClass();
  obj.parents('dd').find('.ok').remove();
  obj.parents('dd').find('.wrong_tip').remove();
}

下面呢,是html的内容,其关键就在于valid=”trim|require”类似的这里了。

<dl>
  <dt>通行证账号:</dt>
  <dd>
    <input name="username" valid="trim|require|min_length[4]|max_length[14]|checkusername" type="text" class="id"/>
  </dd>
  <dd class="description">中英文均可不超过6个汉字或12个字符,不可重复。</dd>
</dl>

js的相关使用上也很简单

/* 失去焦点时提示 */
$("input").blur(function(){
  Validator.Validate($(this));
});

/* ajax提交登录信息 */
$("form[id='login']").submit(function() {
  var st = true;
  var _this = this;
  $(this).find("[valid]").each(function() {
    st = st&Validator.Validate($(this));
  })
  if(st == 1) {
    $.ajax({
      url:"/onlogin",
      type:"POST",
      data:$(this).serialize(),
      dataType:'json',
      success:function(auth) {
        onAjax(auth, _this);
      }
    });
  }
  return false;
})