<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function check(){
var userName=document.getElementById("userName2").value;//得到输入的用户名
var email=document.getElementById("email").value;//得到输入的邮箱
var index1=email.indexOf("@");//判断@符号第一次出现的位置
var index2=email.lastIndexOf(".");//判断.最后出现的位置
var pwd1=document.getElementById("pwd1").value;//得到输入的密码
var pwd2=document.getElementById("pwd2").value;//得到再次输入的密码
//判断用户名是否在4-6位之间(条件自己更改)
if(userName.length<4||userName.length>6){
document.getElementById("userSpan").className="red";
return false;
}
if(pwd1.length<6){
document.getElementById("pwd1Span").className="red";
return false;
}
if(pwd1!=pwd2){
document.getElementById("pwd2Span").className="red";
return false;
document.getElementById("emailSpan").className="red";
return false;
document.getElementById("emailSpan").className="red";
return false;
}
return true;
}
function focusit(txt){
txt.nextSibling.className="span";
}
</script>
<style>
.red{color:#F00;display:inline;}
.span{display:none;}
</style>
</head>
<body>
<form action="a.html" method="post" οnsubmit="return check()">
<fieldset>
<legend>用户注册</legend>
<table width="500" border="1">
<tr>
<td width="219">用户名:</td>
<td width="265"><label for="userName2"></label>
<input type="text" name="userName" id="userName2" οnfοcus="focusit(this)"/><span id="userSpan" class="span">用户名要在4-6位之间</span></td>
</tr>
<tr>
<td>密码:</td>
<td><label for="pwd1"></label>
<input type="password" name="pwd1" id="pwd1" οnfοcus="focusit(this)"/><span id="pwd1Span" class="span">密码至少要有6位</span></td>
</tr>
<tr>
<td>再次输入密码:</td>
<td><label for="pwd2"></label>
<input type="password" name="pwd2" id="pwd2" οnfοcus="focusit(this)" /><span id="pwd2Span" class="span">两次输入的密码不一样</span></td>
</tr>
<tr>
<td>性别:</td>
<td><input name="sex" type="radio" id="sex" value="男" checked="checked" />
<label for="sex">男</label>
<input type="radio" name="sex" id="sex2" value="女" />
<label for="sex2">女</label></td>
</tr>
<tr>
<td>邮箱:</td>
<td><label for="email"></label>
<input type="text" name="email" id="email" οnfοcus="focusit(this)" /><span id="emailSpan" class="span">邮箱格式不正确</span></td>
</tr>
<tr>
<td>个人简介:</td>
<td><label for="mess"></label>
<textarea name="mess" id="mess" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="提交" />
<input type="reset" name="reset" id="reset" value="重置" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function check(){
var userName=document.getElementById("userName2").value;//得到输入的用户名
var email=document.getElementById("email").value;//得到输入的邮箱
var index1=email.indexOf("@");//判断@符号第一次出现的位置
var index2=email.lastIndexOf(".");//判断.最后出现的位置
var pwd1=document.getElementById("pwd1").value;//得到输入的密码
var pwd2=document.getElementById("pwd2").value;//得到再次输入的密码
//判断用户名是否在4-6位之间(条件自己更改)
if(userName.length<4||userName.length>6){
document.getElementById("userSpan").className="red";
return false;
}
if(pwd1.length<6){
document.getElementById("pwd1Span").className="red";
return false;
}
if(pwd1!=pwd2){
document.getElementById("pwd2Span").className="red";
return false;
}
//判断@的位置是否符合要求
if(index1<1||index1>index2){document.getElementById("emailSpan").className="red";
return false;
}
//判断.是否就在@的后面
if(index1==index2-1){document.getElementById("emailSpan").className="red";
return false;
}
return true;
}
function focusit(txt){
txt.nextSibling.className="span";
}
</script>
<style>
.red{color:#F00;display:inline;}
.span{display:none;}
</style>
</head>
<body>
<form action="a.html" method="post" οnsubmit="return check()">
<fieldset>
<legend>用户注册</legend>
<table width="500" border="1">
<tr>
<td width="219">用户名:</td>
<td width="265"><label for="userName2"></label>
<input type="text" name="userName" id="userName2" οnfοcus="focusit(this)"/><span id="userSpan" class="span">用户名要在4-6位之间</span></td>
</tr>
<tr>
<td>密码:</td>
<td><label for="pwd1"></label>
<input type="password" name="pwd1" id="pwd1" οnfοcus="focusit(this)"/><span id="pwd1Span" class="span">密码至少要有6位</span></td>
</tr>
<tr>
<td>再次输入密码:</td>
<td><label for="pwd2"></label>
<input type="password" name="pwd2" id="pwd2" οnfοcus="focusit(this)" /><span id="pwd2Span" class="span">两次输入的密码不一样</span></td>
</tr>
<tr>
<td>性别:</td>
<td><input name="sex" type="radio" id="sex" value="男" checked="checked" />
<label for="sex">男</label>
<input type="radio" name="sex" id="sex2" value="女" />
<label for="sex2">女</label></td>
</tr>
<tr>
<td>邮箱:</td>
<td><label for="email"></label>
<input type="text" name="email" id="email" οnfοcus="focusit(this)" /><span id="emailSpan" class="span">邮箱格式不正确</span></td>
</tr>
<tr>
<td>个人简介:</td>
<td><label for="mess"></label>
<textarea name="mess" id="mess" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="提交" />
<input type="reset" name="reset" id="reset" value="重置" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>