JQuery Validate Password Format

好久沒寫文章，事實上幾乎都把很多技術文章都轉成文件了，最近比較有空就寫個最近用到的東西，JQuery Plugin Validate

首先當然你可能必須要了解什麼是 JQuery，網路上的文章很多，這部分我就不贅述了!
而且我今天所要用的是在前端頁面就可以做一些判斷，例如必填欄位，至少需幾位字元等等

話不多說，Let do it !!!

首先至 JQuery官網 Download JQuery js，再到http://jqueryvalidation.org/ download JQuery validate js
如下 我寫了一個範例程式有2個欄位，請使用者輸入第一次與第二次密碼確認

<form method="GET" id="myform">
<table align="center" style="width:100%; height: 100px; text-align:center;" class="queryTable">
<tr>
<th align="center" colspan="3" class="detailTitle" >
個人更新密碼
</th>
</tr>
<tr>
<td class="queryHeader">更改密碼<span style="color:red;">*</span></td>
<td><input type="password" id="ps" size="30" name="ps"/></td>
</tr>
<tr>
<td class="queryHeader">確認密碼<span style="color:red;">*</span></td>
<td><input type="password" id="ps2" size="30" name="ps2"/></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type=button value="更新" onClick="send()" class="radiusBtn"/>
</td>

</tr>
</table>
</form>

這邊我就不附上我的css class了，首先完成了你的 password form 後，接著記得 在你的jsp頁面上把剛才download的檔案(解壓縮在dist目錄)把js放入你的Web Project(Content)下的目錄
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/additional-methods.js" type="text/javascript"></script>

開始主要驗證程式 如下
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    ps: {
      required: true,
      minlength:8
    },
    ps2: {
      equalTo: "#ps"
    }
  }
});
</script>

重點提示 ps,ps2 這邊是指的是name而不是id，所以沒設定name是不行的
基本上有許多規則可以設定使用可參考其它網址
http://www.coolsun.idv.tw/modules/xhnewbb/viewtopic.php?topic_id=1244
http://jqueryvalidation.org/equalTo-method/
http://iphp.wesped.es/wp/blog/2012/09/page/3/

如上面圖示你會發現我的訊息提示是中文的，基本上套件預設的是英文的
我使用的方式是建立一個message_cn.js 接著同樣在剛在import jquery的位置 import進來
<script src="js/messages_cn.js" type="text/javascript"></script>

其中js的內文就如下
jQuery.extend(jQuery.validator.messages, {
required: "必要欄位",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入有效的字符串",
maxlength: jQuery.validator.format("請輸入一個長度最多是 {0} 的字元"),
minlength: jQuery.validator.format("請輸入一個長度最少是 {0} 的字元"),
rangelength: jQuery.validator.format("請輸入一個長度介於 {0} 和 {1} 之間的字元"),
range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),
min: jQuery.validator.format("請輸入一個最小為 {0} 的值")
});

結果訊息就會是中文的嘍!^^"
===============================================================
接著我想加入我密碼的規則，除了套件預設的規則外，我們還可以自訂規則
如下我的規則是必須符合至少8位至多10位,含!@#$%特殊字元與數字,及英文字母大小寫各1位
$.validator.addMethod("pwcheck", function(value) {
  return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) // consists of only these
      && /[a-z]/.test(value) // has a lowercase letter
      && /\d/.test(value); 
});

然後加上對於此規則的訊息提示使用原本的js變成
$( "#myform" ).validate({
  rules: {
    ps: {
      required: true,
      rangelength:[8,10],
      pwcheck: true
    },
    ps2: {
      equalTo: "#ps"
    }
  },
  messages: {
      ps: {
     required: "必填欄位",
     rangelength: jQuery.validator.format("請輸入長度介於 {0} 至 {1} 之間的字元"),
     pwcheck: "請輸入正確的密碼格式"
      }
  }
});
很神奇吧!，事實上訊息會優先讀取這邊的設定喔!