easyui 表单验证 Form Validation.docVIP

本教程将展示如何验证表单。easyui框架提供了一个验证插件来进行表单验证。本教程中我们将建立一个联系方式表单，并使用验证插件进行表单验证。您可以根据自己的需要改编此表单。创建表单创建一个带有姓名，电子邮件，主题和信息字段的简单联系方式表单: div style=background:#fafafa;padding:10px;width:300px;height:300px; ? ? form id=ff method=post ? ?? ???div ? ?? ?? ?? ?label for=nameName:/label ? ?? ?? ?? ?input class=easyui-validatebox type=text name=name required=true/input ? ?? ???/div ? ?? ???div ? ?? ?? ?? ?label for=emailEmail:/label ? ?? ?? ?? ?input class=easyui-validatebox type=text name=email required=true ? ?? ?? ?? ?? ?validType=email/input ? ?? ???/div ? ?? ???div ? ?? ?? ?? ?label for=subjectSubject:/label ? ?? ?? ?? ?input class=easyui-validatebox type=text name=subject ? ?? ?? ?? ?? ?? ?? ?? ? required=true/input ? ?? ???/div ? ?? ???div ? ?? ?? ?? ?label for=messageMessage:/label ? ?? ?? ?? ?textarea name=message style=height:60px;/textarea ? ?? ???/div ? ?? ???div ? ?? ?? ?? ?input type=submit value=Submit ? ?? ???/div ? ? /form /div 复制代码 我们为每个输入域添加一个名为easyui-validatebox的样式，这样输入域就会根据验证属性进行表单验证。无效时阻止表单提交用户点击按钮提交表单时，如果表单无效则阻止表单提交。 $(#ff).form({ ? ? url:/demo7/ProcessServlet, ? ? onSubmit:function(){ ? ?? ???return $(this).form(validate); ? ? }, ? ? success:function(data){ ? ?? ???alert(data); ? ? } }); 复制代码 如果表单无效将显示提示信息。编写后台代码最后我们编写后台处理代码b并将请求参数打印到控制台并发送到前端页面。 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(); ? ? } }