--------------------这是HTML代码------------------------------------------------------------------
<body>
<form action="login.html" method="post" οnsubmit=" return userInfo()"><fieldset >
<legend>注册用户信息</legend>
<table>
<input type="hidden" value="10001" name="id"/>
<tr>
<td>用户名:</td>
<!-- onkeyup是指当键盘按下松开是触发-->
<td><input type="text" value="username" name="username" id="loginId" οnkeyup="checkedId()" />
<span class="span" id="spanId">用户名至少为六位</span>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" value="password" name="password" id="pwd"/>
<span style="color:red; display: none;" id="spanPwd">密码至少为六位</span>
</td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" value="age" name="age" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="0" /> 男<input type="radio" name="sex" value="1" />女</td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="txt" name="email" id="email" />
<span style="color:red; display: none;" id="spanEmail">邮箱格式不正确</span>
</td>
</tr>
<tr>
<td>电话:</td>
<td><input type="txt" name="tel" id="tel" />
<span style="color:red; display: none;" id="spanTel">电话格式不正确</span>
</td>
</tr>
<tr>
<td>出生日期:</td>
<td>
<select name="year">
<option> 1990</option>
<option> 1991</option>
<option> 1992</option>
<option> 1993</option>
<option> 1994</option>
<option> 1995</option>
<option selected="selected">1996</option>
</select>
<select name="month">
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option selected="selected"> 5</option>
<option> 6</option>
</select>
<select name="day">
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option selected="selected"> 4</option>
<option> 5</option>
<option> 6</option>
</select>
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="holbay" value="唱歌"/>唱歌
<input type="checkbox" name="holbay" value="上网"/>上网
<input type="checkbox" name="holbay" value="打球"/>打球
</td>
</tr>
<tr>
<td>简介:</td>
<td>
<textarea rows="6" cols="40">
1.12313131313
2.asdafasdad
</textarea>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/> <input type="submit" value="重置"/></td>
</tr>
</table>
</fieldset>
</form>
</body>
--------------------这是JS代码------------------------------------------------------------
<style type="text/css">
.span{display: none; }
.span1{display: initial;color: red;}
</style>
<script type="text/javascript">
function userInfo(){
var id=document.getElementById("loginId").value;
var pwd=document.getElementById("pwd").value;
var email=document.getElementById("email").value;
var tel=document.getElementById("tel").value;
var erg= new RegExp(/^1(3|4|5|7|8)\d{9}$/);//正则表达式,选择你需要验证的条件,如果不会,建议去百度如何写!!!
if(id.length<6){
//判断用户的ID是否小于6位
document.getElementById("loginId").focus();
document.getElementById("spanId").className="span1";
return false;
}
if(pwd.length<6){
document.getElementById("pwd").focus();
document.getElementById("spanPwd").style.display="initial";
return false;
}
//判断邮箱格式是否正确
//etc@126.com @的位置index>1 如果没有或者在第一位时 index为-1或者0
//然后判断有(.)的情况 (.)一定在@之后 所以@的位置一定大于(.)的位置
if(email.indexOf("@")<1||email.indexOf("@")>email.lastIndexOf(".")){
document.getElementById("email").focus();
document.getElementById("spanEmail").style.display="initial";
return false;
}
if(!erg.test(tel)){
document.getElementById("tel").focus();
document.getElementById("spanTel").style.display="initial";
return false;
}
return true;
}
function checkedId(){
var id=document.getElementById("loginId").value;
if(id.length>=6){
//如果大于或等于6位时 则红色提示取消
document.getElementById("spanId").className="span";
}else{
document.getElementById("spanId").className="span1";
}
}
</script>
----------------------演示截图---------------------------------------------