[jQuery]Password rule validation密碼規則驗證

隔壁部門的產品規定admin密碼必須符合以下幾項條件，
可是英文敘述怎麼寫都怪，
我建議他們乾脆改成這樣的介面好了.....
符合一項就打一個勾

source code爛爛的....
反正只是mockup嘛....

The team next block had some problem describing rules of creating admin's password:
1. Contains at least 1 upper case character
2. Contains at least 1 lower case character
3. Contains at least 1 number
4. Contains at least 1 special character ex. [?%$.....
5. Length is between 8~32

I suggested maybe some FED validation+hint would help,
and wrote this snippet for demo.

Looks naive and lousy,
.....its' just an illustration.

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
var validate = function(e){
var check = function(val, reg, target){
val.match(reg)?target.show():target.hide();
}
var val = $(e.target).val();
check(val, /(?=.*\d)/, $('#N span'));
check(val, /(?=.*[a-z])/, $('#L span'));
check(val, /(?=.*[A-Z])/, $('#U span'));
check(val, /(?=.*[`~!@#$%^&*()_+=\[\]{}\|<>,./?:;'"-])/, $('#S span'));
check(val, /^.{8,32}$/, $('#LEN span'));}
$('#V').keyup(validate).keydown(validate).change(validate);
});
</script>
<style type="text/css">
.check{
display: none;
color:red;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<input id="V" type="password" />
<div id="U">Upper case<span class="check"> V </span></div>
<div id="L">Lower case<span class="check"> V </span></div>
<div id="N">Number<span class="check"> V </span></div>
<div id="S">Special character<span class="check"> V </span></div>
<div id="LEN">8~32 characters<span class="check"> V </span></div>
</body>
</html>
view raw valid_password.htm hosted with ❤ by GitHub

留言

張貼留言