创建异步提交表单

下面将展示如何通过 easyui 提交一个表单（Form）。我们会创建一个带有 name、email 和 phone 字段的表单。通过使用 easyui 表单插件来改变表单为ajax表单。表单提交所有字段到后台服务器，服务器处理和发送一些数据返回到前端页面。我们接收返回数据，并将它显示出来。

创建表单

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>  	
<form id="ff" action="form1_proc.php" method="post">  		
<table>  			
<tr>  				
<td>Name:</td>  				
<td><input name="name" type="text"></input></td>
</tr>  			
<tr>  				
<td>Email:</td>  				
<td><input name="email" type="text"></input></td>  			
</tr>  			
<tr>  				
<td>Phone:</td>  				
<td><input name="phone" type="text"></input></td>  			
</tr>  			
<tr>  				
<td></td>  				
<td><input type="submit" value="Submit"></input></td>  			
</tr>  		
</table>  	
</form>

改变为 Ajax 表单

$('#ff').form({  		
success:function(data){  			
$.messager.alert('Info', data, 'info');
}  	
});  

服务器端代码

form1_proc.php

$name = $_POST['name'];  	
$email = $_POST['email'];  	
$phone = $_POST['phone'];    	
echo "Your Name: $name <br/> 
Your Email: $email <br/>
Your Phone: $phone";

 表单验证

下面将展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在这里，我们将创建一个联系表单，并应用 validatebox 插件来验证表单。然后大家可以根据自己的需求来调整这个表单。

创建表单

让我们创建一个简单的联系表单，带有 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>

我们添加一个样式名为 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');
}                 
});

如果表单是无效的，将显示一个提示信息。