HTML_登入時的JS驗證方法

svitter發表於2014-05-27
HTMLJS

本文出自：http://blog.csdn.net/svitter

開發一個註冊的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 οnlοad="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");
}


相關文章