核心提示：--------------------这是HTML代码------------------------------------------------------------------bodyfo...
--------------------这是HTML代码------------------------------------------------------------------
<body> <form action="login.html" method="post" onsubmit=" 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" onkeyup="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>
