HTML頁面登錄時的JS驗證方法

2019-11-20 15:02:50

字體：大中小

來源：轉載

供稿：網友

開發一個注冊的HTML頁面，用于搜集用戶的注冊信息。包括：姓名（不能為空），年齡（必須超過17歲），體重（30-150kg），班級（下拉列表），登陸密碼（至少8位長）、確認密碼（和登錄密碼一致），Email(不能為空) , 電話，QQ，個人簡歷等信息。并針對這些表的元素來創建相應的驗證，如果檢測到錯誤，在輸入框后面用紅色的字顯示錯誤。要用到前面幾節學習過的單行文本輸入框text、下拉列表框select、密碼輸入框password、多行文本輸入框textarea。這是一個較實用的用戶注冊表單.。

register.html:

復制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>實驗2</title> 
<link href="check.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="load.js"> 
</script> 
</head> 
<!--return validate()和validate()在于是否清空表單--> 
<body onload="load_greeting()"> 
<form id="test" align="left" onSubmit="return validate()"> 
<table> 
<tr> 
<td>Name*:</td> 
<td><input type="text" name="Name" id="name" size="20" onChange='check("name")'></td> 
<td id="nameCheck" class="check" hidden="true">*姓名不能為空</td> 
</tr> 
<tr> 
<td>Age:</td> 
<td><input type="text" name="Age" id="age" size="20" onChange='check("age")'></td> 
<td id="ageCheck" class="check" hidden="true">*年齡不能小于17歲</td> 
</tr> 
<tr > 
<td>weight:</td> 
<td><input type="text" name="weight" id="weight" size="20" onChange='check("weight")'></td> 
<td id="weightCheck" class="check" hidden="true">*體重范圍為30~150KG</td> 
</tr> 
<tr> 
<td>Class:</td> 
<td><select id="class" name="class"> 
<option>class0</option> 
<option>class1</option> 
<option>class2</option> 
<option>class3</option> 
</select> 
</td> 
</tr> 
<tr> 
<td>Password*:</td> 
<td><input type="password" name="Password" id="password" size="20" onChange='check("password")'></td> 
<td id="passwordCheck" class="check" hidden="true">*password length less than 8</td> 
</tr> 
<tr> 
<td>Confirm Password*:</td> 
<td><input type="password" name="cpassword" id="cpassword" size="20" onChange='check("cpassword")'></td> 
<td id="cpasswordCheck" class="check" hidden="true">*Two passwd is not same</td> 
</tr> 
<tr > 
<td>Email*:</td> 
<td><input type="email" name="email" id="email" size="20" onChange='check(this.id)'></td> 
<td id="emailCheck" class="check" hidden="true">*電子郵件名非法！</td> 
</tr> 
<tr> 
<td>TEL:</td> 
<td><input type="text" name="TEL" id="TEL" size="20"></td> 
</tr> 
<tr> 
<td>QQ:</td> 
<td><input type="text" name="QQ" id="QQ" size="20"></td> 
</tr> 
<tr> 
<td>Personal Information:</td> 
<td><textarea rows="10" cols="19"></textarea></td> 
</tr> 
<tr> 
<td colspan="3"> 
<input type="submit" name="submit"> 
<input type="reset" name="reset"> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

check.css:

復制代碼代碼如下:

 
td.check{ 
color:#C00; 
font-weight:bold; 
} 

load.js:

復制代碼代碼如下:

 
function check(str) 
{ 
var x = document.getElementById(str); 
var y = document.getElementById(str+"Check"); 
//alert("check!"); 
if(str=="name") 
{ 
if(x.value=="") 
y.hidden = false; 
else 
y.hidden = true; 
} 
else if(str=="age") 
{ 
if(isNaN(x.value) || x.value < 17) 
y.hidden = false; 
else 
y.hidden = true; 
} 
else if(str=="weight") 
{ 
x = x.value; 
if(isNaN(x) || x < 30 || x > 150) 
y.hidden = false; 
else 
y.hidden = true; 
} 
else if(str=="password") 
{ 
x = x.value.length; 
if(x < 8) 
{ 
y.hidden = false; 
//alert("check!"); 
} 
else 
y.hidden = true; 
} 
else if(str=="cpassword") 
{ 
var z = document.getElementById("password").value; 
x = x.value; 
if(x != z) 
y.hidden = false; 
else 
y.hidden = true; 
} 
else if(str=="email") 
{ 
x = x.value.indexOf("@") 
if(x == -1) 
y.hidden = false; 
else 
y.hidden = true; 
} 
return y.hidden; 
} 

function validate() 
{ 
var arr=["name", "age", "weight", "password", "cpassword", "email"]; 
var i = 0; 
submitOK = true; 
while(i <= 5) 
{ 
if(!check(arr[i])) 
{ 
alert(arr[i]+" wrong!"); 
submitOK = false; 
break; 
} 
i++; 
} 
if(submitOK) 
{ 
alert("提交成功！"); 
return true; 
} 
else 
{ 
alert("提交失敗"); 
return false; 
} 
} 

function load_greeting() 
{ 
//alert("visit /n"); 
} 