jQuery EasyUI 表單 – 表單驗(yàn)證

jQuery EasyUI 表單 - 表單驗(yàn)證

本節(jié)將介紹jQuery EasyUI的表單驗(yàn)證是如何實(shí)現(xiàn)的，EasyUI框架提供一個(gè)validatebox插件來驗(yàn)證一個(gè)表單。

下述的示例將向您展示如何驗(yàn)證一個(gè)表單，我們將創(chuàng)建一個(gè)聯(lián)系表單，并應(yīng)用validatebox插件來驗(yàn)證表單。然后您可以根據(jù)自己的需求來調(diào)整這個(gè)表單。

創(chuàng)建表單（form）

讓我們創(chuàng)建一個(gè)簡(jiǎn)單的聯(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>
			&lt;textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
		</div>
		<div>
			<input type="submit" value="Submit">
		</div>
	</form>

我們添加一個(gè)樣式名為easyui-validatebox到input標(biāo)記，所以input標(biāo)記將根據(jù)validType屬性應(yīng)用驗(yàn)證。

當(dāng)表單無效時(shí)阻止表單提交

當(dāng)用戶點(diǎn)擊表單的submit按鈕時(shí)，如果表單是無效的，我們應(yīng)該阻止表單提交。

	$('#ff').form({
		url:'form3_proc.php',
		onSubmit:function(){
			return $(this).form('validate');
		},
		success:function(data){
			$.messager.alert('Info', data, 'info');
		}
	});

如果表單是無效的，將顯示一個(gè)提示信息。

下載 jQuery EasyUI 實(shí)例

jeasyui-form-form3.zip