1.引入js
jquery.form.min.js
2.实例
在前端页面里加上class=”required” 就能在提交表单是 进行验证
<input name="amt" id="amt" type="number" htmlEscape="false" maxlength="50" class="required"/>
<span class="help-inline"><font color="red">*</font> </span> //验证错误提示
var options3 = {
focusCleanup:true,focusInvalid:false,
errorClass: "unchecked",
validClass: "checked",
errorElement: "span",
errorPlacement:function(error,element){
var s = element.parent().find("span[htmlFor='" + element.attr("id") + "']");
if(s!=null){
s.remove();
}
error.appendTo(element.parent());
},
success: function(label) {
label.removeClass("unchecked").addClass("checked");
},
rules:{
//验证规则 如果需要自定义的规则 则使用$.validator.addMethod 下面单独拿来讲
}
};
function showResponse3(responseText, statusText) {
loader.hide();
// responseText 后台返回的json格式数据都封装在此处 success result 都是在后台自己命名
if(responseText.success){
$.jBox.tip(responseText.result)
}else{
$.jBox.error(responseText.result)
}
}
function showRequest3(formData,jqForm,options){
return $("#表单id").valid();
}
var validator = null;
$(document).ready(function(){
validator = $("#表单id").validate(options3);
$("#reset").click(function(){
validator.resetForm();
});
$("button").click(function(){
validator.form();
});
$("#表单id").submit(function(){
$(this).ajaxSubmit({
type:"post",//提交方式
url: “”“”,//路径
beforeSubmit:showRequest3,//此处提交表单时对form里的数据进行封装
beforeSend:function(){
console.log("正在进行,请稍候");
loader.show();//
},
success:showResponse3 //成功时调用的函数
});
setTimeout("$('#btnSubmit').removeAttr('disabled')",3000);
return false; //此处必须返回false,阻止常规的form提交
});
});
3.自定义表单验证–jquery validator addMethod的使用
"af"为名称 自己命名 使用例子:rules:{
koulv:{af['20']}// koulv为input里的name af 为调用验证的函数 20为参数 如果需要输入多个参数 则为[10,20,30]
}
value 为当前元素本身的值 如 : value则为10,
element 为当前元素
params 传入的参数 如上面传入的20
只能返回true 和false
“请填写提现扣率” 为 如果为 false 则会提示 请填写提现扣率
$.validator.addMethod("af",function(value,element,params){
if(params[0]==1){
return false;
}
if(params[0]==0){
return true;
}
},"请填写提现扣率");
4 请求后台controller
记得要写上produces =”application/json;charset=utf-8” 不然返回前端时 前端会拿不到数据
@RequestMapping(value = "save",produces ="application/json;charset=utf-8")
@ResponseBody
public String save(){
}