<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script>
function $(id) {
return document.getElementById(id);
}
function checkUsername (username) {
var digital = /^\d+$/;
var character = /^\w+$/;
var elmt = $(‘user_error’);
if(username == null || username.length < 4){
elmt.innerHTML="用戶名長度不能小於4個字符，請重新輸入。";
return false;
}else if(username.length > 20){
$(‘user_error’).innerHTML="用戶名長度不能大於20個字符，請重新輸入。";
elmt.style.display=”;
return false;
}else if(digital.test(username)) {
$(‘user_error’).innerHTML="用戶名不能為全數字，請重新輸入。";
elmt.style.display=”;
return false;
}else if (!character.test(username)){
$(‘user_error’).innerHTML="用戶名格式有誤，請重新輸入。";
elmt.style.display=”;
return false;
}else{
elmt.style.display="none";
return true;
}
}
function checkEmail1(id)
{
var rule = /^[0-9a-z]+[0-9a-z\-\._]*@[0-9a-z]+[0-9a-z\-]*(\.[a-z]{2,4}){1,2}$/i;
var obj = $(id);
if(obj.value == ""){
var msg = "請輸入郵箱";
$(‘email_error’).innerHTML = msg;
$(‘email_error’).style.display="";
return false;
}
if(obj.value != "" && !rule.test(obj.value)){
var msg = "郵箱格式不正確。";
$(‘email_error’).innerHTML = msg;
$(‘email_error’).style.display="";
return false;
}else{
var msg = "郵箱填寫正確";
$(‘email_error’).innerHTML = msg;
$(‘email_error’).style.display="";
return true;
}
}
function checkLevel(str)
{
var total_score = 0;
var length_score = checkLength(str);
var letter_score = checkLetter(str);
var digit_score = checkDigit(str);
var symbol_score = checkSymbol(str);
if (letter_score != 0 && digit_score != 0)
{
total_score += 2;
}
if (letter_score != 0 && digit_score != 0 && symbol_score != 0)
{
total_score += 3;
}
if (letter_score == 20 && digit_score != 0 && symbol_score != 0)
{
total_score += 5;
}
total_score += length_score + letter_score + digit_score + symbol_score;
if (total_score >= 90)
{
return 6;
}
else if (total_score >= 80)
{
return 5;
}
else if (total_score >= 70)
{
return 4;
}
else if (total_score >= 60)
{
return 3;
}
else if (total_score >= 50)
{
return 2;
}
else if (total_score >= 25)
{
return 1;
}
else
{
return 0;
}
}
function checkLength(str)
{
var score = 0;
if (str)
{
var length = str.length;
if (length <= 5)
{
score = 5;
}
else if (length > 5 && length <= 10) {
score = 10;
}
else
{
score = 25;
}
}
return score;
}
function checkLetter(str)
{
var score = 0;
if (str)
{
var rule1 = /^[^A-Z]*[a-z]+[^A-Z]*$|^[^a-z]*[A-Z]+[^a-z]*$/;
var rule2 = /^.*[a-z](.*[A-Z]{1,}.*)+$|^.*[A-Z](.*[a-z]{1,}.*)+$/;
if (rule1.test(str))
{
score = 10;
}
else if (rule2.test(str))
{
score = 20;
}
else
{
score = 0;
}
}
return score;
}
function checkDigit(str)
{
var score = 0;
if (str)
{
var rule1 = /^[^0-9]*([0-9][^0-9]*){1,2}$/;
var rule2 = /^[^0-9]*([0-9][^0-9]*){3,}$/;
if (rule1.test(str))
{
score = 10;
}
else if (rule2.test(str))
{
score = 20;
}
else
{
score = 0;
&nb
sp; }
}
return score;
}
function checkSymbol(str)
{
var score = 0
if (str)
{
var rule1 = /^[0-9a-z]*([^0-9a-z][0-9a-z]*){1}$/i;
var rule2 = /^[0-9a-z]*([^0-9a-z][0-9a-z]*){2,}$/i;
if (rule1.test(str))
{
score = 10;
}
else if (rule2.test(str))
{
score = 25;
}
else
{
score = 0;
}
}
return score;
}
function testLevel(id, str)
{
var level = checkLevel(str);
switch (level)
{
case 6: var status = "非常安全"; break;
case 5: var status = "安全"; break;
case 4: var status = "非常強"; break;
case 3: var status = "強"; break;
case 2: var status = "一般"; break;
case 1: var status = "弱"; break;
case 0: var status = "非常弱"; break;
default: var status = "";
}
var obj = $(id);
obj.innerHTML = status;
}
function checkRepassword(id, id2)
{
var obj = $(id);
var obj2 = $(id2);
var val = false;
if(obj2.value == "" || obj.value == ""){
var msg = "請輸入密碼！";
$(‘pwd_error’).innerHTML = msg;
$(‘pwd_error’).style.display="";
return false;
}
if (obj.value != obj2.value)
{
var msg = "兩次輸入的密碼不一致，請重新輸入。";
$(‘pwd_error’).innerHTML = msg;
$(‘pwd_error’).style.display="";
return false;
}
else
{
var msg = "密碼符合要求";
$(‘pwd_error’).innerHTML = msg;
$(‘pwd_error’).style.display="";
return true;
}
}
</script>
</head>
<body>
<div>用戶名：<input type="text" id="username" name="username" onkeyup="checkUsername(this.value);"/><input type="button" name="smt" value="檢測" onclick="checkUsername(username.value);"/><span id="user_error" name="user_error"></span></div>
<div>郵箱：<input type="text" id="email" name="email" onkeyup="checkEmail1(‘email’);" /><input type="button" name="smt" value="檢測" onclick="checkEmail1(‘email’);" /><span id="email_error" name="email_error"></span></div>
<div>密碼：<input type="password" id="password" name="password" onkeyup="testLevel(‘safe’,this.value);checkRepassword(‘password’,'password2′);" />密碼強度：<span id="safe" name="safe"></span>
<div>確定密碼：<input type="password" id="password2" name="password2" onkeyup="testLevel(‘safe’,password.value);checkRepassword(‘password’,'password2′)"/><input type="button" name="smt" value="檢測" onclick="testLevel(‘safe’,password.value);checkRepassword(‘password’,'password2′)"/><span id="pwd_error" name="pwd_error"></span></div>
<div></div>
</body>
</html>