快捷導航

jquery判斷輸入密碼兩次是否相等

更新時間：2020年04月22日 14:54:01 投稿：lijiao

這篇文章分別介紹了Jquery框架easyui判斷輸入密碼兩次是否相等，以及使用jQuery.validate驗證表單中兩次密碼是否一致的問題，需要的朋友可以參考下

Jquery easyui是一個非常好的ui框架，但是表單驗證中沒有最常用的判斷兩個輸出框中值相等的驗證，所以我做了下擴展。

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

使用示例：

密碼： <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="兩次輸入密碼不匹配"/>

將validType屬性指定為equalTo['#password']即可。
當然使用這個小插件，必須要先引用jquery easyui的js庫。

使用jQuery.validate驗證表單中兩次密碼是否一致的時候遇到了一點小問題，這是我編寫的代碼：

$("#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: "*請輸入手機號碼"
     }
    }
   });

為什么明明我輸入的兩次密碼是一致的還一直提示我呢？試過不同的瀏覽器和不同版本的validate都是如此。

不知道大家有沒有遇到類似的問題，我查閱了許多文章，總結(jié)了一下解決問題的思路：