jquery中validate插件表单验证

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=path%>/js/jquery.js" ></script>
    <script type="text/javascript" src="<%=path%>/js/jquery.validate.js"></script>
    <script type="text/javascript">
        var validator; 
        $(document).ready(function(){
            
            $.validator.addMethod("zip_code",function(value,element,parents){
                var laijie =/^[0-9]{6}$/;
                return this.optional(element)||(laijie.test(value));
            },$.validator.format("{0}"));
            
            $("#check").click(function(){
                alert($("#validateform").valid()?"true":"false");
            });
            $.validator.setDefaults({
                debug:true});
            validator = $("#validateform").validate({
                rules:{
                    username:{
                        required:true,
                        rangelength:[2,10],
                        zip_code:"邮编格式"
                    },
                    passwd:{
                        required:true,
                        rangelength:[2,16]
                    },
                    confirmpasswd:{
                        required:true,
                        equalTo:"#passwd"
                    }
                },
                messages:{
                    username:{
                        required:"户名必填",
                        rangelength:"用户名介于{0}和{1}之间"
                    },
                    passwd:{
                        required:"密码为空",
                        rangelength:"密码介于{0}和{1}之间"
                    },
                    confirmpasswd:{
                        required:"确认密码为空",
                        equalTo:"密码不相同"
                    }
                },
                submitHandler:function(form){
                    //form.submit();
                    console.log($(form).serialize());
                }
            });
        });
        
    </script>
  </head>
  
  <body>
      <form action="" method="post" id="validateform" name="validateform">
      <fieldset>
      <legend>登陆窗口</legend>
      邮编:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" id="username" name="username"/><br>
      密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="password" id="passwd" name="passwd"/><br>
      确认密码:
      <input type="password" id="confirmpasswd" name="confirmpasswd"/><br>
      <input type="button" id="check" name="check" value="检查">&nbsp;
    <input type="submit" id="send" value="注册" /><br>
    <div id = "resText"></div>
    </fieldset>
    </form>
  </body>
</html>

例子所需包

原文地址:https://www.cnblogs.com/laijie/p/4735633.html