zoukankan      html  css  js  c++  java
  • 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>

    例子所需包

  • 相关阅读:
    漫步ASP.NET MVC的处理管线
    HTTP压力测试工具
    javaweb学习总结(四十)——编写自己的JDBC框架
    javaweb学习总结(三十九)——数据库连接池
    javaweb学习总结(三十八)——事务
    javaweb学习总结(三十七)——获得MySQL数据库自动生成的主键
    javaweb学习总结(三十六)——使用JDBC进行批处理
    JavaWeb学习总结(三十五)——使用JDBC处理Oracle大数据
    javaweb学习总结(三十四)——使用JDBC处理MySQL大数据
    javaweb学习总结(三十三)——使用JDBC对数据库进行CRUD
  • 原文地址:https://www.cnblogs.com/laijie/p/4735633.html
Copyright © 2011-2022 走看看