不管css樣式，實作這種功能最簡單的代碼。（如圖）[/code]
求大神幫忙，
uj5u.com熱心網友回復：
你看看這個符不符合你的要求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>password</td>
<td><input type="password" id="a" placeholder="blablabla"/><label id="a1" style="visibility:hidden">6-20</label></td>
</tr>
<tr>
<td>confirmpassword</td>
<td><input type="password" id="b" /><label id="b1" style="visibility:hidden">shuruxiangtongzhi</label></td>
</tr>
</table>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var a1 = document.getElementById("a1");
var b1 = document.getElementById("b1");
a.onchange = function () {
if (a.value.length < 6 || a.value.length > 20) {
a1.style.visibility = "visible";
}
else {
a1.style.visibility = "hidden";
}
}
b.onchange = function () {
if (a.value != b.value) {
b1.style.visibility = "visible";
}
else {
b1.style.visibility = "hidden";
}
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
代碼有一個小問題
[br]如果先輸入第二個密碼框的話，在輸入第一個密碼框不管怎么輸入，底下的那個出錯提示都在。
uj5u.com熱心網友回復：
現在沒事了，還有就是密碼框怎么弄小眼睛？
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>password</td>
<td><input type="password" onclick="validate()" id="a" placeholder="blablabla" /><label id="a2">woshiyanjing</label><label id="a1" style="visibility:hidden">6-20</label></td>
</tr>
<tr>
<td>confirmpassword</td>
<td><input type="password" onclick="validate()" id="b" /><label id="b2">woshiyanjing</label><label id="b1" style="visibility:hidden">shuruxiangtongzhi</label></td>
</tr>
</table>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var a1 = document.getElementById("a1");
var b1 = document.getElementById("b1");
var a2 = document.getElementById("a2");
var b2 = document.getElementById("b2");
function validate() {
if (a.value.length < 6 || a.value.length > 20) {
a1.style.visibility = "visible";
}
else {
a1.style.visibility = "hidden";
}
if (a.value != b.value) {
b1.style.visibility = "visible";
}
else {
b1.style.visibility = "hidden";
}
}
a2.onclick = function () {
if (a.getAttribute("type") == "text") {
a.setAttribute("type","password");
a2.innerHTML = "biyan"
}
else {
a.setAttribute("type", "text");
a2.innerHTML = "zhengyan"
}
}
b2.onclick = function () {
if (b.getAttribute("type") == "text") {
b.setAttribute("type", "password");
b2.innerHTML = "biyan"
}
else {
b.setAttribute("type", "text");
b2.innerHTML = "zhengyan"
}
}
</script>
</body>
</html>
可以把自己找一個圖片當眼睛，我直接用label了
uj5u.com熱心網友回復：
1：表單驗證（前后端）最好是統一的驗證2：你說的那個小眼睛應該是瀏覽器對于type="password"的支持
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229676.html
標籤：JavaScript
上一篇：怎么寫
下一篇：求補充一個正則！