jquery easyui表单验证实例学习

发布时间:2020-12-03编辑:脚本学堂
本文介绍了jquery easyui实现表单验证的一个例子,学习下jquery easyui进行表单验证的方法,需要的朋友参考下。

jquery EasyUI中进行表单验证,通过validatebox插件实现。

例子,
 

复制代码 代码示例:
<div style="background:#fafafa;padding:10px;width:300px;height:300px;"> 
    <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> 

 这个表单对name,email,subject字段定义为必填字段,并且对email字段中的填写格式作了限制。

为了防止表单验证未通过时进行提交,必须:
 

复制代码 代码示例:
$('#ff').form({ 
    url:'/demo7/ProcessServlet', 
    onSubmit:function(){ 
        return $(this).form('validate'); 
    }, 
    success:function(data){ 
        alert(data); 
    } 
});

运行效果,如下图:
jquery easyui 表单验证