使用validate进行表单验证，实现ajax异步验证
程序员文章站
2022-03-08 19:28:21
...
表单
#{form @saveProject(), method:'POST', id:'saveProject'}
<div class="data_info">
<div class="data_item" >
<div class="item_title" style="height:50px;line-height: 30px">标的录入-商票 <input id="ticketBidBtn" style="width:150px;height:30px;margin-left:500px;" type="button" value="添加房抵标的信息"/></div>
<div class="item_content">
<ul>
<li>
<div class="td_title"><span>*</span>借款人：</div>
<div class="td_content"><input class="input_title" type="text" id="reality_name" name="reality_name" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>贷款金额（元）：</div>
<div class="td_content"><input class="input_title" type="text" id="amount" name="amount" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>贷款期限(天)：</div>
<div class="td_content">
<input class="input_title" type="text" id="period" name="period" placeholder="">
</div>
</li>
<li>
<div class="td_title"><span>*</span>募集期(天)：</div>
<div class="td_content">
<input class="input_title" type="text" id="invest_period" name="invest_period" placeholder="">
</div>
</li>
<li>
<div class="td_title"><span>*</span>发标日：</div>
<input id="start_time" name = "start_time" placeholder = "yyyy-mm-dd" type="text" style="height:30px;"/>
<img onclick="WdatePicker({el:$dp.$('start_time')})" src="@{'/public/My97DatePicker/skin/datePicker.gif'}" _fcksavedurl="@{'/public/My97DatePicker/skin/datePicker.gif'}" width="16" height="22" align="absmiddle">
</li>
<li>
<div class="td_title"><span>*</span>起息日：</div>
<input id="begin_interest" name = "begin_interest" placeholder = "yyyy-mm-dd" type="text" style="height:30px;"/>
<img onclick="WdatePicker({el:$dp.$('begin_interest')})" src="@{'/public/My97DatePicker/skin/datePicker.gif'}" _fcksavedurl="@{'/public/My97DatePicker/skin/datePicker.gif'}" width="16" height="22" align="absmiddle">
</li>
<li>
<div class="td_title"><span>*</span>投资人年化利率：</div>
<div class="td_content"><input class="input_title" type="text" id="apr" name ="apr" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>标的类型：</div>
<div class="td_content">
<select name="type" id="type" class="input_select">
<option value="1">如意宝</option>
</select>
</div>
</li>
<li>
<div class="td_title"><span>*</span>商票编号：</div>
<div class="td_content"><input class="input_title" type="text" id="ticket_no" name="ticket_no" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>融资年化利率：</div>
<div class="td_content"><input class="input_title" type="text" id="invest_rate" name ="invest_rate" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>贷款用途：</div>
<div class="td_content"><textarea class="input_textarea" type="text" id="loanUsage" name = "loanUsage" placeholder=""></textarea></div>
</li>
<li>
<div class="td_title"><span>*</span>担保函编号：</div>
<div class="td_content"><input class="input_title" type="text" id="guarantee_no" name = "guarantee_no" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>合同编号：</div>
<div class="td_content"><input class="input_title" type="text" id="pact_no" name = "pact_no" placeholder=""></div>
</li>
<li>
<div class="td_title"><span>*</span>保障函：</div>
<div class="pic_div">
<div class="pic_size">
<input type="hidden" name="guarantee" id="guarantee" value=""/>
<input type="file" class="input_file" name="imgFile" id="guarantee_file" onchange="upload('guarantee_file','guarantee_image','guarantee');"/>
<img id="guarantee_image" style="position:relative; z-index:5;" src="@{'public/skin/images/qcyh.jpg'}" />
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div class="td_title"><span>*</span>合同：</div>
<div class="pic_div">
<div class="pic_size">
<input type="hidden" name="pact" id="pact" value=""/>
<input type="file" class="input_file" name="imgFile" id="pact_file" onchange="upload('pact_file','pact_image','pact');"/>
<img id="pact_image" style="position:relative; z-index:5;" src="@{'public/skin/images/qcyh.jpg'}" />
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="btn_alter">
<input class="btn_search" type="submit" value = "保存" >
</div>
#{/form}validate 验证
$().ready(function() {
$("#saveProject").validate({
onkeyup: false,
//失去焦点验证
onfocusout: function(element) { $(element).valid(); },
rules: {
reality_name:{
required: true,
remote: {
url: "/newr/supervisor/project/verifyUserByRealityName",
type: "post",
dataType: "json",
data: {
reality_name: function () {
return $("#reality_name").val(); //这个是取要验证的数据
}
},
dataFilter: function (data) { //判断控制器返回的内容
return data;
}
}
},
amount:{
required: true,
number:true
},
period:{
required: true,
digits:true
},
invest_period:{
required: true,
digits:true
},
start_time:{
required: true,
dateISO:true
},
begin_interest:{
required: true,
dateISO:true
},
apr:{
required: true,
number:true
},
ticket_no:{
required: true,
remote: {
url: "/newr/supervisor/project/verifyTicketByTicketNo",
type: "post",
dataType: "json",
data: {
ticket_no: function () {
return $("#ticket_no").val(); //这个是取要验证的数据
}
},
dataFilter: function (data) { //判断控制器返回的内容
return data;
}
}
},
invest_rate:{
required: true,
number:true
},
loanUsage:{
required: true
},
guarantee_no:{
required: true
},
pact_no:{
required: true
}
},
messages: {
reality_name:{
required: "请输入借款人",
remote:"借款人不存在，请核对"
},
amount:{
required: "请输入贷款金额",
number:"金额输入不合法"
},
period:{
required: "请输入贷款期限",
digits:"贷款期限不合法"
},
invest_period:{
required: "请输入募集期",
digits:"募集期不合法"
},
start_time:{
required: "请输入发标日",
dateISO:"发标日不合法"
},
begin_interest:{
required: "请输入起息日",
dateISO:"起息日不合法"
},
apr:{
required: "请输入投资人年化利率",
number:"投资人年化利率不合法"
},
ticket_no:{
required: "请输入商票编号",
remote:"商票不存在，请核对"
},
invest_rate:{
required: "请输入融资年化利率",
number:"融资年化利率不合法"
},
loanUsage:{
required: "请输入贷款用途"
},
guarantee_no:{
required: "请输入担保函编号"
},
pact_no:{
required: "请输入合同编号"
}
}
})
});validate使用总结