博客列表 >js实现表单验证

js实现表单验证

Fergus的博客
Fergus的博客原创
2017年09月05日 14:40:29650浏览
直接上代码

/**
* 验证表单内容
* required  必填项
* email  邮箱
* number  数字
* chinese  汉字
* idcode  
* phone  电话
* mobile  手机
* check="length" min='2' max='5' msg='请输入大2小5个字符'  长度限制
*
* 单独验证
* validate(obj)
* 批量表单认证
* validate_form(formId)
* validate_class_form(form_class)
*
* @param obj
* @returns {boolean}
*/
function validate(obj) {
   if (obj.attr("or_check") != undefined ){
       var objOr = $("#"+obj.attr("or_check"));
       if(objOr){
           if(!(objOr.attr("isValidate")!= undefined && objOr.attr("isValidate")=='1' )){
               obj.attr('isValidate','1');
               if(validate(objOr)) return true;
           }

       }
   }

   if (obj.attr("check") == undefined && obj.attr("unequals")==undefined) return true;
   var str = obj.attr("check");
   if (str.indexOf("length") >= 0) {
       clear_check_style(obj);
       var obj_val= fergus.clearHtml(obj.val());

       if(obj.attr("min")!=undefined && obj.attr("min")!=''){
           if (obj_val.length < parseInt(obj.attr("min"))){
               return return_false(obj, __get_index(str, "length"));
           }
       }
       if(obj.attr("max")!=undefined && obj.attr("min")!=''){
           if (obj_val.length > parseInt(obj.attr("max"))){
               return return_false(obj, __get_index(str, "length"));
           }
       }
       set_right(obj);

   }

   if (str.indexOf("required") >= 0) {
       clear_check_style(obj);
       var string =  trim(obj.val());
       if (string == "") {
           return return_false(obj, __get_index(str, "required"));
       } else {
           set_right(obj);
       }
   }
   if (str.indexOf("email") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_email(obj.val())) {
           return return_false(obj, __get_index(str, "email"));
       } else {
           set_right(obj);
       }
   }

   if (str.indexOf("number") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_number(obj.val())) {
           return return_false(obj, __get_index(str, "number"));
       } else {
           set_right(obj);
       }
   }

   if (str.indexOf("float") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_float(obj.val())) {
           return return_false(obj, __get_index(str, "float"));
       } else {
           set_right(obj);
       }
   }


   if (str.indexOf("chinese") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_chinese(obj.val())) {
           return return_false(obj, __get_index(str, "chinese"));
       } else {
           set_right(obj);
       }
   }

   if (str.indexOf("idcode") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_idcode(obj.val())) {
           return return_false(obj, __get_index(str, "idcode"));
       } else {
           set_right(obj);
       }
   }

   if (str.indexOf("mobile") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_mobile(obj.val())) {
           return return_false(obj, __get_index(str, "mobile"));
       } else {
           set_right(obj);
       }
   }

   if (str.indexOf("phone") >= 0) {
       clear_check_style(obj);
       if (obj.val() != '')if (!is_phone(obj.val())) {
           return return_false(obj, __get_index(str, "phone"));
       } else {
           set_right(obj);
       }
   }

   if (str.indexOf("equals") >= 0) {
       clear_check_style(obj);
       //console.log( str.substring(str.indexOf(":")+1));
       if (obj.val() != '')if (obj.val() != $("#" + str.substring(str.indexOf(":") + 1)).val()) {
           return return_false(obj, __get_index(str, "equals"));
       } else {
           set_right(obj);
       }
   }


   var unequals = obj.attr("unequals");
   if (unequals!="") {
       clear_check_style(obj);
       if (obj.val() == unequals) {
           return return_false(obj, 0);
       } else {
           set_right(obj);
       }
   }



   return true;
}


function __get_index(str, check_str) {
   var splitre = new RegExp(",", "g");
   var indexof = str.indexOf(check_str);
   var result = str.substring(0, indexof).match(splitre);
   var index = !result ? 0 : result.length;
   return index;


}

function set_right(obj) {
   obj.addClass("input_right");
}

function clear_check_style(obj) {
   obj.siblings(".wrong").remove();
   obj.removeClass("input_wrong");
}

function return_false(obj, index) {
   obj.addClass("input_wrong");


   var msg="";
   if(obj.attr("msg") != undefined)msg = obj.attr("msg");

   var msgout = "";
   if (index >= 0) {
       if (msg != "") {
           var msglist = msg.split(",");
           msgout = msglist[index];
       }
       // console.log(msgout)
   } else {
       msgout = msg;
   }
   if(msgout!=""){
       obj.parent().css({"position":"relative"});
       if(obj.attr("msg_n")&&obj.attr("msg_n")=="yes"){
           obj.after("<span class='wrong'><span></span class='formTip'>" + msgout + "</span>");
       }else{
           obj.after("<span class='wrong' style='position:  absolute;width:400px'><span></span>" + msgout + "</span>");

       }
       fergus.hint(msgout);
   }
   return false;
}

function validate_form(formId) {
   var formStr="";
   if(formId){formStr="#"+formId+" "};
   return _validate_from(formStr);
}

function  _validate_from(formStr) {
   var result = true;
   $(formStr+"input,"+formStr+"textarea").each(function () {
       result = validate($(this));
       if (!result) {
           $('html,body').animate({"scrollTop": $(this).offset().top-480 + "px"},400);
           return result;
       }
   });
   return result;
}

function validate_class_form(form_class) {
   var formStr="";
   if(form_class){formStr="."+form_class+" "};
   return _validate_from(formStr);
}


function init_validate() {
   $("input,textarea").each(function () {
       if ($(this).attr("check") != undefined){
           var str = $(this).attr("check");
           if (str.indexOf("required") >= 0) {
               $(this).parent().css("position","relative");
               $(this).parent().find('.txt_orange').remove();
               $(this).after("<span class='txt_orange' style='position: absolute; top: 0;left: "+($(this).position().left+$(this).width()+parseInt($(this).css('marginLeft'))+parseInt($(this).css('marginRight'))+parseInt($(this).css('paddingLeft'))+parseInt($(this).css('paddingRight'))+parseInt($(this).css('borderRight'))+parseInt($(this).css('borderRight'))+4)+"px;'> *</span>");

           }
       }
   })


}

$("input,textarea").each(function () {
   $(this).change(function () {
       init_validate()
   })
})

$(function () {
   $("input,textarea").not(".select input").blur(function () {
       validate($(this));
   });
   init_validate();

});

function is_number(val) {
   var reg = new RegExp("^[0-9]*$");
   return reg.test(val)
}

function is_float(val) {
   var reg = new RegExp("^[0-9]*(\.[0-9]*)?$");
   return reg.test(val)
}


function is_chinese(val) {
   var reg = new RegExp("^[\u4e00-\u9fa5],{0,}$");
   return reg.test(val)
}

function is_email(val) {
   var reg = new RegExp("^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$");
   return reg.test(val)
}


function is_phone(val) {
   var reg = new RegExp("^(0\\d{2}-\\d{8}(-\\d{1,4})?)|(0\\d{3}-\\d{7,8}(-\\d{1,4})?)$|(^400[0-9]{7})");
   return reg.test(val)
}

function is_idcode(val) {
   var reg = new RegExp("^[0-9]{15,18}$");
   return reg.test(val)
}
function is_mobile(val) {
   var reg = new RegExp("^^((13[0-9])|(14[0-9])|(15([0-3]|[5-9]))|(18[0-9])|(17[0-9]))\\d{8}$");
   return reg.test(val)
}

function trim(str){ //删除左右两端的空格
   return  $.trim(str);


}



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议