query实现表单验证

1.表单 

 先引入：jQuery jquery.form.js

<form id="form111" name="form111" action="${path }/item/addBrand.do" method="post" enctype="multipart/form-data">
<input type="hidden" name="lastRealPath" id="lastRealPath">
<div class="edit set">
　　<p><label><samp>*</samp>品牌名称：</label>
　　　　<input type="text" id="brandName" name="brandName" class="text state" reg2="^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$" tip="必须是中英文或数字字符，长度1-20"/>
　　　　　<span></span>
</p>
<p><label class="alg_t"><samp>*</samp>品牌LOGO：</label><img id='imgsImgSrc' src="" height="100" width="100" />
</p>
<p><label></label>

　　<input type='file' size='27' id='imgsFile' name='imgsFile' class="file" οnchange='submitUpload()' /><span id="submitImgTip" class="pos">请上传图片宽为120px，50px，　　大小不超过100K。</span>
　　<input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="亲！您忘记上传图片了。" /><span></span>
</p>

<p><label>品牌网址：</label><input type="text" name="website" class="text state" maxlength="100" tip="请以http://开头" reg1="http:///*"/>
　　　　<span class="pos">&nbsp;</span>
</p>
<p><label class="alg_t">品牌描述：</label><textarea rows="4" cols="45" name="brandDesc" class="are" reg1="^(.|\n){0,300}$" tip="任意字符，长度0-300"></textarea>
　　<span class="pos">&nbsp;</span>
</p>
<p><label>排序：</label><input type="text" id="brandSort" reg1="^[1-9][0-9]{0,2}$" tip="排序只能输入1-3位数的正整数" name="brandSort" class="text small"/>
　　<span class="pos">&nbsp;</span>
</p>
<p><label>&nbsp;</label><input type="submit" name="button1" d class="hand btn83x23" value="完成" /><input type="button" class="hand btn83x23b" id="reset1" value='取消' 　　οnclick="backList('${backurl}')"/>
</p>
</div>
</form>

2.表单验证 

$(function(){

$("#form111").submit(function(){
var isSubmit = true;
//校验必填字段
$(this).find("[reg2]").each(function(){
//获得输入的值
var val = $(this).val();
val = $.trim(val);
//获得正则
var reg = $(this).attr("reg2");
//获得提示信息
var tip = $(this).attr("tip");
//创建正则表达式的对象
var regExp = new RegExp(reg);
if(!regExp.test(val)){
$(this).next("span").html("<font color='red'>"+tip+"</font>");
isSubmit = false;
//在jQuery中跳出循环要使用return false;
return false;
}else{
//判断当前的input是品牌名称
var inputName = $(this).attr("name");
if(inputName == "brandName"){
//校验品牌名称的重复
var result = validBrandName(val);
if(result == "no"){
$(this).next("span").html("<font color='red'>品牌名称已存在</font>");
isSubmit = false;
//在jQuery中跳出循环要使用return false;
return false;
}else{
$(this).next("span").html("");
}
}else{
$(this).next("span").html("");
}


}

});

$(this).find("[reg1]").each(function(){
//获得输入的值
var val = $(this).val();
val = $.trim(val);
//获得正则
var reg = $(this).attr("reg1");
//获得提示信息
var tip = $(this).attr("tip");
//创建正则表达式的对象
var regExp = new RegExp(reg);
if(val !=null && val != "" && !regExp.test(val)){
$(this).next("span").html("<font color='red'>"+tip+"</font>");
isSubmit = false;
//在jQuery中跳出循环要使用return false;
return false;
}else{
$(this).next("span").html("");
}

})
//防止表单二次提交
if(isSubmit){
tipShow("#refundLoadDiv");
}
return isSubmit;
});


$("#form111").find("[reg2]").blur(function(){
//获得输入的值
var val = $(this).val();
val = $.trim(val);
//获得正则
var reg = $(this).attr("reg2");
//获得提示信息
var tip = $(this).attr("tip");
//创建正则表达式的对象
var regExp = new RegExp(reg);
if(!regExp.test(val)){
$(this).next("span").html("<font color='red'>"+tip+"</font>");
}else{
//判断当前的input是品牌名称
var inputName = $(this).attr("name");
if(inputName == "brandName"){
//校验品牌名称的重复
var result = validBrandName(val);
if(result == "no"){
$(this).next("span").html("<font color='red'>品牌名称已存在</font>");
}else{
$(this).next("span").html("");
}
}else{
$(this).next("span").html("");
}
}

});

$("#form111").find("[reg1]").blur(function(){
//获得输入的值
var val = $(this).val();
val = $.trim(val);
//获得正则
var reg = $(this).attr("reg1");
//获得提示信息
var tip = $(this).attr("tip");
//创建正则表达式的对象
var regExp = new RegExp(reg);
if(val !=null && val != "" && !regExp.test(val)){
$(this).next("span").html("<font color='red'>"+tip+"</font>");
}else{
$(this).next("span").html("");
}

})
})

/**
* 品牌名称重复性校验
* ajax：默认异步的
* 异步
* |---------->ajax
* ————————————>——————————> 主程序
*
* 同步
* ————————————>|---------->——————————>
* @param brandName
* @returns {String}
*/
function validBrandName(brandName){
var result = "yes";
$.ajax({
url:path+"/item/validBrandName.do",
type:"post",
async:false,//把ajax变为同步
data:{
brandName:brandName
},
dataType:"text",
success:function(responseText){
result = responseText;
},
error:function(){
alert("系统错误");
}
})
return result;
}

 

转载于:https://www.cnblogs.com/ljllove/p/9201491.html