老师,这个地方我用jquery validate验证的时候,确认密码的文本框不能进行验证

老师,这个地方我用jquery validate验证的时候,确认密码的文本框不能进行验证

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册界面</title>
   <%
      String nameRepeat = request.getParameter("nameRepeat");
   %>
   <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
   <script type="text/javascript" src="js/jquery.validate.js"></script>
   <script>
      //文本框验证代码
      $().ready(function () {
         $("#commentForm").validate({
            rules:{
               username:{
                  required:true,
                  checkUserName:true
               },
               password:{
                  required:true,
                  checkPassWord:true
               },
               confirm_password:{
                  required:true,
                  equalTo:"#password"
               },
               phone:{
                  required:true,
                  checkPhone:true
               },
               email:{
                  required:true
               }
            },
            messages:{
               username:{
                  required:"请输入用户名!"
               },
               password:{
                  required:"请输入密码!"
               },
               confirm_password:{
                  required:"请再次输入密码!",
                  equalTo:"两次密码输入不一致!"
               },
               phone:{
                  required:"请输入手机号!"
               },
               email:"请输入一个正确的邮箱!"
            }
         })
      });
      //正则表达式验证代码
      //用户名验证
      $.validator.addMethod("checkUserName",function (value,element,params) {
         var checkUserName = /^\w{3,13}$/g;
         return this.optional(element)||(checkUserName.test(value));
      },"请输入正确的用户名!");
      //密码验证
      $.validator.addMethod("checkPassWord",function (value,element,params) {
         var checkPassWord = /^[0-9]{6,12}$/;
         return this.optional(element)||(checkPassWord.test(value));
      },"请输入正确的密码!");
      //手机号验证
      $.validator.addMethod("checkPhone",function (value,element,params) {
         var checkUserName = /^[1][3578][0-9]{9}$/;
         return this.optional(element)||(checkUserName.test(value));
      },"请输入正确的手机号码!");


      var nameRepeat = "<%=nameRepeat%>";
      if(nameRepeat === "1"){
         alert("您输入的用户名已经被注册,请重新输入!");
      }
   </script>
   <style>
      .error{
         color: red;
      }
   </style>
</head>
<body>
   <center>
      <h1>用户注册</h1>
      <form action="/BookSystem/RegistServlet" method="post" id="commentForm">
         <table width="600px" cellspacing="0px" cellpadding="0px" border="1px">
            <tr>
               <td>用户名</td>
               <td><input type="text" name="username" placeholder="用户名为3-12位字母数字或下划线组合" id="username" style="width: 300px;" ></td>
            </tr>
            <tr>
               <td>密&nbsp;码</td>
               <td><input type="password" name="password" placeholder="密码长度为6-12位的纯数字"  id="password" style="width: 300px;" ></td>
            </tr>
            <tr>
               <td>确认密码</td>
               <td><input type="password" name="checkPWD" placeholder="密码长度为6-12位的纯数字" id="confirm_password" style="width: 300px;" ></td>
            </tr>
            <tr>
               <td>手机号码</td>
               <td><input type="text" name="phone" placeholder="请输入正确的手机号码格式" id="phone" style="width: 300px;"></td>
            </tr>
            <tr>
               <td>邮箱</td>
               <td><input type="email" name="email" placeholder="请输入正确邮箱格式" id="email" style="width: 300px;"></td>
            </tr>
            <tr>
               <td colspan="2" style="text-align:center">
                  <input type="submit" value="注册" id="submit">
                  <input type="reset" value="重置">
               </td>
            </tr>
         </table>
      </form>
   </center>
   <script type="text/javascript">
      var main1 = $("#password");
      var main2 = $("#confirm_password");
      //给确认密码输入框添加一个失去焦点时的事件:判断密码和确认密码输入框中的字符串是否一致;若不一致,则弹出提示框
      main2.blur(function(){
         var pw1 = main1.val();
         var pw2 = main2.val();
         if (pw1 !== pw2){
            alert("两次输入的密码不一致,请重新输入!");
         }
      });
   </script>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5ce234cc0001689e07970310.jpghttp://img1.sycdn.imooc.com//climg/5ce234e70001b1f507910268.jpg

确认密码多输了一位,但是没有验证出来,请问这是怎么回事呢?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好!出错的原因是因为jquery validate验证的时候使用的是name,但是同学给确认密码框的name和验证时使用的不一样呢,同学将name改为confirm_password就可以了

http://img1.sycdn.imooc.com//climg/5ce25482000152c706810082.jpg

如果我的回答解决了你的疑惑,请采纳,祝学习愉快~


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师