通用的前端修改密碼驗證
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改密碼的驗證</title>
</head>
<h1>修改密碼</h1>
<b id="passModifyMess" style="color: red;"></b>
<form action="modifyPassword.html" method="post">
<table border="1" cellpadding="0" width="20%">
<td>舊密碼：</td>
<td><input type="password" id="oldpass" /></td>
</tr>
<tr>
<td>新密碼：</td>
<td><input type="password" id="newpass" /></td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="password" id="confirmpass" /></td>
<tr>
<td>驗證碼：</td>
<td><input type="text" id="code" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="submit" value="提交" />
<input type="reset" id="reset" value="重置" />
</tr>
</table>
</form>
<body>
<script>
window.onload = function() {
var reset = document.getElementById(‘reset‘);
var fm = document.getElementsByTagName(‘form‘)[0];
var passModifyMess = document.getElementById(‘passModifyMess‘);
reset.onclick = function() {
oldpass.value = ‘‘;
newpass.value = ‘‘;
confirmpass.value = ‘‘;
code.value = ‘‘;
oldpass.focus();
};
fm.onsubmit = function() {
if(!/^\w{6,20}$/.test(oldpass.value)) {
passModifyMess.innerHTML = "* 舊密碼錯誤！";
oldpass.value = "";
oldpass.focus();
return false;
}
if(!/^\w{6,20}$/.test(newpass.value)) {
passModifyMess.innerHTML = "* 新密碼不合法！";
newpass.value = ‘‘;
newpass.focus();
return false;
}
if(newpass.value != confirmpass.value) {
passModifyMess.innerHTML = "* 兩次輸入的新密碼不一致，請重新輸入！";
newpass.value = ‘‘;
confirmpass.value = ‘‘;
newpass.focus();
return false;
}
if(!/^\d{4}$/.test(code.value)) {
passModifyMess.innerHTML = "* 驗證碼錯誤！";
code.value = ‘‘;
code.focus();
return false;
}
return true;
};
};
</script>
</body>
</html>
通用的前端修改密碼驗證