[Javascript] 添加密碼規則要求 - 使用 jQuery.validator

剛好碰到需求，且沒有太嚴重的部分，就先偷懶用前端擋：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<script>

$(document).ready(function() {
// 要有 a-z
$.validator.methods.passwd_rule1 = function( value, element ) {
return this.optional( element ) || /[a-z]+/.test( value );
}
// 要有 A-Z
$.validator.methods.passwd_rule2 = function( value, element ) {
return this.optional( element ) || /[A-Z]+/.test( value );
}
// 要有 0-9
$.validator.methods.passwd_rule3 = function( value, element ) {
return this.optional( element ) || /[0-9]+/.test( value );
}


$("form").validate({
rules: {
newPassword: {
required: true,
minlength: 8,
passwd_rule1: true,
passwd_rule2: true,
passwd_rule3: true,
},

checkNewPassword: {
equalTo: "#newPassword"
}
},

messages: {
newPassword: "密碼必須8位數以上，且需含大小寫英文跟數字",
checkNewPassword: "輸入錯誤，請確認密碼",
}
});
});
</script>

其他把玩：

在 Chrome console 引入 library 測試，而非修改 source code

var js = document.createElement('script');
js.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(js);
var js = document.createElement('script');
js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js";
document.getElementsByTagName('head')[0].appendChild(js);

替沒有 id tag 的 input 添加 id：

$('[name=newPassword]').attr('id', 'newPassword');