登入框(用獲取value值方法)
阿新 • • 發佈:2018-11-28
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
width: 240px;
height: 30px;
margin-top: 10px;
}
.right{
text -align: right;
}
</style>
<script>
function check(){
var phone = document.getElementById("phone").value;
var pwd = document.getElementById("pwd").value;
var qr_pwd = document.getElementById("qr_pwd").value;
var nb = document.getElementById("nb").value;
if(phone==null || phone==""){
document.getElementById("span_phone").innerHTML="*登入名不能為空!";
return;
}else{
document.getElementById("span_phone").innerHTML=" <font style='color: green;'>√正確</font>";
}
if(pwd==null || pwd==""){
document.getElementById("span_pwd").innerHTML="*密碼不能為空!";
return;
}else{
document.getElementById("span_pwd").innerHTML="<font style='color: green;'>√正確</font>";
}
if(qr_pwd==null || qr_pwd==""){
document.getElementById("span_qr_pwd").innerHTML="*確認密碼不能為空!";
return;
}else{
document.getElementById("span_qr_pwd").innerHTML="<font style='color: green;'>√正確</font>";
}
if(qr_pwd!=pwd){
document.getElementById("span_qr_pwd").innerHTML="*確認密碼和密碼不一致!";
return;
}else{
document.getElementById("span_qr_pwd").innerHTML="<font style='color: green;'>√正確</font>";
}
if(nb==null || nb==""){
document.getElementById("span_nb").innerHTML="*驗證碼不能為空!";
return;
}else{
document.getElementById("span_nb").innerHTML="<font style='color: green;'>√正確</font>";
}
//提交表單
document.getElementById("f2").submit();
}
</script>
</head>
<body>
<center>
//注意:method="post"時Hbuilder可能會出現"內部伺服器錯誤"提示字樣!WebStrom則不會出現此問題。
//也可將method="post"改為method="get"解決此問題
//action="跳轉的html檔案"
<form id="f2" action="demo1.html" method="post">
<table style="border: 1px;">
<tr>
<td class="right">登入名:</td>
<td><input id="phone" type="text"/></td>
<td><span id="span_phone" style="color: red;"></span></td>
</tr>
<tr>
<td class="right">密碼:</td>
<td><input id="pwd" type="text"/></td>
<td><span id="span_pwd" style="color: red;"></span></td>
</tr>
<tr>
<td class="right">確認密碼:</td>
<td><input id="qr_pwd" type="text"/></td>
<td><span id="span_qr_pwd" style="color: red;"></span></td>
</tr>
<tr>
<td class="right">驗證碼:</td>
<td><input id="nb" type="text"/></td>
<td><span id="span_nb" style="color: red;"></span></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="button" onclick="check()" value="提交" style="width: 60px;;"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>