教程集 > jQuery > jquery 教程 > 正文 jquery easyui表单验证实例学习

jquery easyui表单验证实例学习

发布时间：2015-12-29 编辑：jiaochengji.com

本文介绍了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 表单验证