js顯示表單的提交驗證
阿新 • • 發佈：2018-07-01
return else eve borde var doc doctype table 表單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
document.onkeydown=function(event){
//獲取鍵盤的回車鍵
if(event.keyCode==13){
var sh=show();
if(sh!=false){
//如果非空驗證通過，則提交表單
document.forms[0].submit();
}
}
}
function show(){
//獲取用戶名
var name=document.getElementById(‘username‘);
//獲取密碼
var pwd=document.getElementById(‘password‘);
//獲取確認密碼
var repwd=document.getElementById(‘repassword‘);
//獲取年齡
var ageObj=document.getElementById(‘age‘);
//獲取學歷
var eduObj=document.getElementById(‘edu‘);
//驗證用戶名是否為非空，如果為空
if(‘‘ == name.value || null == name.value || name.value.trim() == ‘‘){
//獲取提示信息行
var userSpanObj = document.getElementById(‘userSpan‘);
//打印提示信息
userSpanObj.innerHTML = "<font color=‘red‘>用戶名不能為空!!!</font>";
//獲取鼠標焦點
name.focus();
return false;
}else{
//如果為非空，獲取提示信息行
var userSpanObj = document.getElementById(‘userSpan‘);
//提示信息為空
userSpanObj.innerHTML = "";
}
//驗證密碼是否為非空，如果為空
if(‘‘ == pwd.value || null == pwd.value || pwd.value.trim() == ‘‘){
//獲取提示信息行
var pwdSpanObj = document.getElementById(‘pwdSpan‘);
//打印提示信息
pwdSpanObj.innerHTML = "<font color=‘red‘>密碼不能為空!!!</font>";
//獲取鼠標焦點
pwd.focus();
return false;
}else{
//如果為非空，獲取提示信息行
var pwdSpanObj = document.getElementById(‘pwdSpan‘);
//提示信息為空
pwdSpanObj.innerHTML = "";
}
//驗證確認密碼是否為非空，如果為空
if (‘‘ == repwd.value || null == repwd.value || repwd.value.trim() == ‘‘) {
//獲取提示信息行
var repwdSpanObj = document.getElementById(‘repwdSpan‘);
//打印提示信息
repwdSpanObj.innerHTML = "<font color=‘red‘>確認密碼不能為空!!!</font>";
//獲取鼠標焦點
repwd.focus();
return false;
} else{
//如果為非空，獲取提示信息行
var repwdSpanObj = document.getElementById(‘repwdSpan‘);
//提示信息為空
repwdSpanObj.innerHTML = "";
}
//如果密碼的輸入不一致
if (repwd.value!=pwd.value) {
//獲取提示信息行
var repwdSpanObj = document.getElementById(‘repwdSpan‘);
//打印提示信息
repwdSpanObj.innerHTML = "<font color=‘red‘>密碼不一致!!!</font>";
//獲取鼠標焦點
repwd.focus();
return false;
} else{
//如果密碼的輸入一致，獲取提示信息行
var repwdSpanObj = document.getElementById(‘repwdSpan‘);
//提示信息為空
repwdSpanObj.innerHTML = "";
}
//驗證年齡是否為非空，如果為空
if(‘‘ == ageObj.value || null == ageObj.value || ageObj.value.trim() == ‘‘){
//獲取提示信息行
var ageSpanObj = document.getElementById(‘ageSpan‘);
//打印提示信息
ageSpanObj.innerHTML = "<font color=‘red‘>年齡不能為空!!!</font>";
//獲取鼠標焦點
ageObj.focus();
return false;
}else{
//如果為非空，獲取提示信息行
var ageSpanObj = document.getElementById(‘ageSpan‘);
//提示信息為空
ageSpanObj.innerHTML = "";
}
//如果option的屬性value為0，則意味著未選擇
if(0==eduObj.value){
var eduSpanObj = document.getElementById(‘eduSpan‘);
eduSpanObj.innerHTML = "<font color=‘red‘>學歷不能為空!!!</font>";
return false;
}else{
var eduSpanObj = document.getElementById(‘eduSpan‘);
eduSpanObj.innerHTML = "";
}
return true;
}
</script>
</head>
<body>
<!--
作者：[email protected]
時間：2018-07-01
描述：表單的提交方式必須為get方式
-->
<form action="demo04.html" method="get">
<table align="center" width="500px" border="0">
<tr>
<td>用戶名：</td>
<td><input type="text" id="username" name="username"/></td>
<td>
<span id="userSpan"></span>
</td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" id="password" name="password"/></td>
<td>
<span id="pwdSpan"></span>
</td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="text" id="repassword" name="repassword"/></td>
<td>
<span id="repwdSpan"></span>
</td>
</tr>
<tr>
<td>年齡：</td>
<td><input type="text" id="age" name="age"/></td>
<td>
<span id="ageSpan"></span>
</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>學歷：</td>
<td>
<select id="edu" name="edu">
<option value="0">--請選擇--</option>
<option value="1">小學</option>
<option value="2">中學</option>
<option value="3">大學</option>
</select><br/>
</td>
<td>
<span id="eduSpan"></span>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="註冊" onclick="return show()" />
<!--<button onclick="return show()">註冊</button>-->
</td>
</tr>
</table>
</form>
</body>
</html>
js顯示表單的提交驗證