logo

EasyUI 表单验证2012-07-18

本教程将要显示你如何验证表单。easyui框架提供了validatebox插件以验证表单。在这个教程中,我们将要构建联系表单并且应用validatebox插件验证表单。你可以修改它适应自己的要求。
构建表单
让我们构建简单的内容的表单: name, email, subject 和message 字段:
<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>

我们添加class名为easyui-validatebox到input标记,所以input标记应用验证依照validType属性。
当出现错误的时候阻止表单发送
当用户点击发送按钮,我们应该阻止有错误的表单发送。
$('#ff').form({

    url:'/demo7/ProcessServlet',

    onSubmit:function(){

        return $(this).form('validate');

    },

    success:function(data){

        alert(data);

    }

});

如果表单不可以,出现提示:
\
编写处理代码
最后,我们编写后台处理服务代码,这个代码显示在控制台上的接收参数并发送简单信息到前台页面。
public class ProcessServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String email = request.getParameter("email");
        String subject = request.getParameter("subject");
        String message = request.getParameter("message");
        System.out.println("Name:"+name);
        System.out.println("Email:"+email);
        System.out.println("Subject:"+subject);
        System.out.println("Message:"+message);
 
        PrintWriter out = response.getWriter();
        out.println("ok");
        out.close();
    }

相关话题

热门搜索

  • EasyUI
  • 表单验证

扫描二维码分享话题