easyui Form验证
@author YHC
这个教程将向你展示如何验证一个form,easyui框架提供一个validatebox 插件去验证一个form,在这个教程我们将创建一个联系我们的form和应用validatebox 插件
验证form,然后你可以改编这个form到你自己的需求.
查询 Demo
创建 form
让我们创建一个简单的联系我们的form和name, email, subject and message字段.
[html]
<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>
<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 属性.
当form数据无效时阻止form提交
当用户点击form的submit按钮,如果form是无效的我们应该阻止form提交.
[javascript]
$('#ff').form({
url:'form3_proc.php',
onSubmit:function(){
return $(this).form('validate');
},
success:function(data){
$.messager.alert('Info', data, 'info');
}
});
$('#ff').form({ www.zzzyk.com
url:'form3_proc.php',
onSubmit:function(){
return $(this).form('validate');
},
success:function(data){
$.messager.alert('Info', data, 'info');
}
}); 如果form是无效的,一个提示信息将显示.
补充：web前端 , JavaScript ,
