封装好的一个万能检测表单的方法
检测表单中的不能为空(.notnull)的验证
作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断
用法:在form标签下找到当前表单的容器给予class="form",当前表单的提交按钮给予class="check"
需要验证为空的元素给予class="notnull"nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="need"
判断的类型给予class="num"(只能是数字)验证的提示logicmsg="XX只能是数字"
给予class="errorMessage"显示错误信息块
给予class="warn"显示错误信息
未使用js面向对象编程
逻辑判断,不传入need标识,直接给出正则表达式属性(自定义)regex="/^\d$/" 做出判断
在外部实现
Global.submitCallbackbutton回调函数
Global.confirmCallbackconfirm回调函数;
需要改进的地方:
暂无
///<referencepath="vendor/jquery-1.4.1-vsdoc.js"/>
*/
//$(document).ready(
// function(){
// $("form").find(".notnull").bind({
// focus:function(){
// if($(this).attr("value")==this.defaultValue){
// $(this).attr("value","");
// }
// },
// blur:function(){
// if($(this).attr("value")==""){
// $(this).attr("value",this.defaultValue);
// }
// }
// });
// }
//);
///*封装一个万能检测表单的方法*/
///event.srcElement:引发事件的目标对象,常用于onclick事件。
///event.fromElement:引发事件的对象源,常用于onmouseout和onmouseover事件。
///event.toElement:引发事件后,鼠标移动到的目标源,常用于onmouseout和onmouseover事件。
functionGlobal(){
var_self=this;
}
Global.submitCallback=null;
Global.confirmCallback=null;
$(document).ready(function(){
//formbody
$("body").find(".form").each(function(){
this.onclick=function(e){
varbutton=null;
try{
button=e.srcElement==null?document.activeElement:e.srcElement;
}catch(e){
console.log(e.message)
button=document.activeElement;
}
if($(button).is(".check")){
//alert("提交")
varsub=(checkform(this)&&CheckInputRex(this)&&checkselect(this)&&checkChecked(this));
if(sub){
//Callourcallback,butusingourowninstanceasthecontext
Global.submitCallback.call(this,[e]);
}
returnsub;
}elseif($(button).is(".confirm")){
//alert("删除")
varsub=confirm($(button).attr("title"));
if(sub){
Global.confirmCallback.call(this,[e]);
}
returnsub;
}else{
// //alert("其它")
returntrue;
}
}
});
/*检测表单中不能为空的元素*/
functioncheckform(form){
varb=true;
$(form).find(".notnull").each(function(){
if($.trim($(this).val()).length<=0){//||$(this).val()==this.defaultValue
// if(this.value!=null){
// $(this).attr("value","");
// }
//alert($(this).attr("msg"))
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
returnb=false;
}
});
if(b==true){
$(form).find(".warn").text("");
$(form).find(".errorMessage").hide();
}
returnb;
}
/*检测表单中必选的下拉列表*/
functioncheckselect(form){
varb=true;
$(form).find(".select").each(function(i){
varck=$(this).find('option:selected').text();
if(ck.indexOf("选择")>-1){
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
returnb=false;
}
});
returnb;
}
/*检测表单中必选的复选框*/
functioncheckChecked(form){
varb=true;
$(form).find(".checkbox").each(function(i){
varck=$(this)[0].checked;
if(!ck){
$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
$(this).select();
$(this).focus();
returnb=false;
}
});
returnb;
}
//检查是否匹配该正则表达式
functionGetFlase(value,reg,ele){
if(reg.test(value)){
returntrue;
}
$(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
$(ele).parents(".form").find(".errorMessage").show();
$(ele).focus();
$(ele).select();
returnfalse;//不能提交
}
functionCheckInputRex(form){
varb=true;
$(form).find("input[type='text']").each(function(){
if(typeof($(this).attr("regex"))=='string'){
if($.trim($(this).val()).length>0&&$(this).val()!=this.defaultValue){
//当前表单的值
varvalue=$(this).attr("value")||$(this).val();
varregx=eval($(this).attr("regex"));
returnb=GetFlase(value,regx,this);
}
}
});
returnb;
}
///检查用户输入的相应的字符是否合法
///此方法已废弃
functionCheckInput(form){
varb=true;
$(form).find(".need").each(function(){
if($.trim($(this).val()).length>0&&$(this).val()!=this.defaultValue){
//当前表单的值
varvalue=$(this).attr("value");
//id的值或者name的属性的值如:[name="contact"]
varname=$(this).attr("class");
//检查需要输入的内容是否合法如:联系方式
varlen=name.split("");
for(vari=0;i<len.length;i++){
switch($.trim(len[i])){
///联系方式
case"mobile":
varreg=/^1\d{10}$/;
returnb=GetFlase(value,reg,this);
break;
///邮箱
case"email":
varreg=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
returnb=GetFlase(value,reg,this);
break;
///两次密码是否一致
case"password":
break;
case"password2":
if($("#password").attr("value")!=$("#password2").attr("value")){
$(this).select();//获取焦点
$(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
returnb=false;//不能提交
}
break;
case"worktel":
case"hometel"://家庭电话
varreg=/^\d{8}$/;
returnb=GetFlase(value,reg,this);
break;
case"post"://邮编
varreg=/^\d{6}$/;
returnb=GetFlase(value,reg,this);
break;
case"bonus":
case"allowance":
case"FixedSalary":
varreg=/^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0|[1-9]\d)$/;
returnb=GetFlase(value,reg,this);
break;
case"identity":
varreg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
returnb=GetFlase(value,reg,this);
break;
case"height":
varreg=/^[1-2][0-9][0-9]$/;
returnb=GetFlase(value,reg,this);
break;
case"qq":
varreg=/^[1-9][0-9]{4,}$/;
returnb=GetFlase(value,reg,this);
break;
case"begintime":
case"endtime":
varreg=/^\d{4}$/;
if(reg.test(value)&&(parseInt($(".endtime").val())>parseInt($(".begintime").val()))){
returnb;
}
$.ligerDialog.alert($(this).attr("msg"))
$(this).select();//获取焦点
returnb=false;//不能提交
break;
case"num":
varreg=/^\d+$/;
returnb=GetFlase(value,reg,this);
break;
///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有:
///14/15+7位数,G+8位数;
///因公普通的是:P.+7位数;
///公务的是:S.+7位数或者
//S+8位数,以D开头的是外交护照
case"postport"://护照号码
varreg=/^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|1[4,5]\d{7})$/;
returnb=GetFlase(value,reg,this);
break;
case"bankaccount":
varreg=/^[0-9]{19}$/;
returnb=GetFlase(value,reg,this);
break;
}//switch
}//for
}
});
returnb;
}
///此方法已经废弃
});
///单击改变背景颜色
$(document).ready(function(){
varinputs=$("#top>.c>input");
$(inputs).each(function(){
this.onclick=function(){
document.getElementById("main").style.backgroundColor=this.name;
//$("#main").backgroundColor=this.name;
}
});
});
以上代码就是封装过之后的万能检测表单的方法了,希望小伙伴们喜欢