jquery determines whether the password entered twice is equal

jquery determines whether the password entered twice is equal_jquery

WBOY

Release： 2016-05-16 15:28:22

Original

2380 people have browsed it

Jquery easyui is a very good UI framework, but there is no most commonly used verification in form validation to determine whether the values in two output boxes are equal, so I made an extension.

$.extend($.fn.validatebox.defaults.rules, {  
  /*必须和某个字段相等*/ 
  equalTo: { 
    validator:function(value,param){ 
      return $(param[0]).val() == value; 
    }, 
    message:'字段不匹配' 
  } 
       
});

Copy after login

Usage example:

密码： <input id="password" name="password" validType="length[4,32]" class="easyui-validatebox" required="true" type="password" value=""/> 
<br/> 
确认密码：<input type="password" name="repassword" id="repassword" required="true" class="easyui-validatebox" validType="equalTo['#password']" invalidMessage="两次输入密码不匹配"/>

Copy after login

Just specify the validType attribute as equalTo['#password'].
Of course, to use this small plug-in, you must first reference the js library of jquery easyui.

I encountered a small problem when using jQuery.validate to verify whether the two passwords in the form are consistent. This is the code I wrote:

$("#aspnetForm").validate({
        rules: {
          txtName: {
            required: true
          },
          txtTrueName: {
            required: true
          },
          txtPass: {
            required: true,
            minlength: 3
          },
          txtTwoPass: {
            required: true,
            minlength: 3,
            equalTo: "#txtPass"
          },
          txtEmail: {
            required: true,
            email: true
          },
          txtAddress: {
            required: true
          },
          txtPhone: {
            required: true
          }
        },
        messages: {
          txtName: {
            required: "*请输入用户名"
          },
          txtTrueName: {
            required: "*请输入姓名"
          },
          txtPass: {
            required: "*请输入密码",
            minlength: "*密码不能小于3个字符"
          },
          txtTwoPass: {
            required: "*请输入确认密码",
            minlength: "*密码不能小于3个字符",
            equalTo: "*请再次输入相同的值"
          },
          txtEmail: {
            required: "*请输入邮箱",
            email: "*请输入正确的邮箱格式"
          },
          txtAddress: {
            required: "*请输入地址"
          },
          txtPhone: {
            required: "*请输入手机号码"
          }
        }
      });

Copy after login

Why do you keep prompting me even though the two passwords I entered are the same? This is true even after trying different browsers and different versions of validate.

I don’t know if anyone has encountered similar problems. I checked many articles and summarized the ideas for solving the problem:

First check whether the two password types of the html page are assigned IDs.
Or search whether there are two txtPass IDs on the page.
Or you can remove equalTo first, re-verify to see if there are other errors, and go back to troubleshoot this place.

I hope this article can give you some inspiration. Thank you for reading. I will definitely continue to work hard.