easyui Form验证

@author YHC

这个教程将向你展示如何验证一个form,easyui框架提供一个validatebox 插件去验证一个form,在这个教程我们将创建一个联系我们的form和应用validatebox 插件

验证form,然后你可以改编这个form到你自己的需求.

查询 Demo

创建 form

让我们创建一个简单的联系我们的form和name, email, subject and 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 属性.

当form数据无效时阻止form提交

当用户点击form的submit按钮,如果form是无效的我们应该阻止form提交.

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

如果form是无效的,一个提示信息将显示.

下载 EasyUI 示例代码:

easyui-form-demo.zip