W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
本節(jié)將介紹jQuery EasyUI的表單驗證是如何實現的,EasyUI框架提供一個validatebox插件來驗證一個表單。
下述的示例將向您展示如何驗證一個表單,我們將創(chuàng)建一個聯(lián)系表單,并應用validatebox插件來驗證表單。然后您可以根據自己的需求來調整這個表單。
讓我們創(chuàng)建一個簡單的聯(lián)系表單,帶有name、email、subject和message字段:
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" type="text" name="name" required="true"></input>
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
</div>
<div>
<label for="subject">Subject:</label>
<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
</div>
<div>
<label for="message">Message:</label>
<textarea name="message" style="height:60px;"></textarea>
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
我們添加一個樣式名為easyui-validatebox到input標記,所以input標記將根據validType屬性應用驗證。
當用戶點擊表單的submit按鈕時,如果表單是無效的,我們應該阻止表單提交。
$('#ff').form({
url:'form3_proc.php',
onSubmit:function(){
return $(this).form('validate');
},
success:function(data){
$.messager.alert('Info', data, 'info');
}
});
如果表單是無效的,將顯示一個提示信息。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: