HTML页面登录时的JS验证方法

前端技术 2023/09/02 JavaScript
开发一个注册的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\");
}

本文地址：https://www.stayed.cn/item/3916

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案