HTML_登录时的JS验证方法

来源：互联网发布：windows的发展过程编辑：程序博客网时间：2024/05/19 22:48

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

开发一个注册的HTML页面，用于搜集用户的注册信息。包括：姓名（不能为空），年龄（必须超过17岁），体重（30-150kg），班级（下拉列表），登陆密码（至少8位长）、确认密码（和登录密码一致），Email(不能为空) , 电话，QQ，个人简历等信息。并针对这些表的元素来创建相应的验证，如果检测到错误，在输入框后面用红色的字显示错误。要用到前面几节学习过的单行文本输入框text、下拉列表框select、密码输入框password、多行文本输入框textarea。这是一个较实用的用户注册表单.。

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

0 0