使用validate進行表單驗證，實現ajax非同步驗證
阿新 • • 發佈：2019-02-10
表單
#{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使用總結