以下是js验证部分代码:
<script language="javascript" type="text/javascript"> //用户名验证 function checkUsername(){ var username = document.getElementById("username").value; var usernameMsg = document.getElementById("usernameMsg"); if(username.length>=4&&username.length<=15){ usernameMsg.innerHTML="<font color=green>此用户名可以使用</font>"; }else{ usernameMsg.innerHTML="<font color=red>此用户名输入有误!</font>"; } } //密码验证 function checkPassword(){ var password = document.getElementById("password").value; var passwordMsg = document.getElementById("passwordMsg"); if(password.length>=6&&password.length<=20){ passwordMsg.innerHTML="<font color=green>此密码可以使用</font>"; }else{ passwordMsg.innerHTML="<font color=red>此密码输入有误!</font>"; } } //重复密码验证 function checkPassword2(){ var password = document.getElementById("password").value; var password2 = document.getElementById("password2").value; var passwordMsg2 = document.getElementById("passwordMsg2"); if(password2!=""){ if(password==password2){ passwordMsg2.innerHTML="<font color=green>确认密码正确</font>"; }else{ passwordMsg2.innerHTML="<font color=red>两次输入的密码不相等!</font>"; } }else{ passwordMsg2.innerHTML="<font color=red>密码不能为空!</font>"; } } //邮箱验证 function checkEmail(temp){ var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; var emailMsg = document.getElementById("emailMsg"); if(reg.test(temp)){ emailMsg.innerHTML="<font color=green>你的邮箱可用</font>"; }else{ emailMsg.innerHTML="<font color=red>请输入正确的邮箱!</font>"; } } //姓名验证 function checkRealName(temp) { var reg=/[\u4E00-\u9FA5]/g; var realNameMsg = document.getElementById("realNameMsg"); if (reg.test(temp)){ realNameMsg.innerHTML="<font color=green>姓名可以使用</font>"; }else{ realNameMsg.innerHTML="<font color=red>姓名要求为汉字!</font>"; } } //昵称验证 function checkRealName2() { var realName2 = document.getElementById("realName2").value; var realNameMsg2 = document.getElementById("realNameMsg2"); if(realName2=="") { realNameMsg2.innerHTML="<font color=red>昵称不能为空!</font>"; }else{ realNameMsg2.innerHTML="<font color=green>昵称可以使用</font>"; } } //联系电话验证 var mobile = /^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/; var phoneMag = document.getElementById("phoneMag"); function checkPhone(temp) { //var mobile = /^(((d{2,3}))|(d{3}-))?13d{9}$/; var phoneMsg = document.getElementById("phoneMsg"); if(mobile.test(temp)) { phoneMsg.innerHTML="<font color=red> </font>"; } else { phoneMsg.innerHTML="<font color=red>请输入正确的手机号码</font>"; } } </script>
以下是表单代码:
<form action="http://www.baidu.com" method="post" onSubmit="">
<table width="700px" border="0" align="center" ;>
<tr>
<td width="30%" height="40"><font size="3"><b>普通用户</b></font></td>
<td width="70%" height="40">
</td>
</tr>
<tr>
<td width="30%" height="40">*用户名:</td>
<td width="70%" height="40"><input name="username" type="text" id="username" value="" οnblur="checkUsername()" maxlength= "15">
<span id="usernameMsg"><font color="#818181">4-15个字符(包括英文字母,数字,下划线)</font></span>
</td>
</tr>
<tr>
<td height="40">*密码:</td>
<td height="40"><input name="password" type="password" id="password" οnblur="checkPassword()">
<span id="passwordMsg"><font color="#818181">6-20个字符(包括英文字母、数字)</font></span>
</td>
</tr>
<tr>
<td height="40">*再输一遍确认:</td>
<td height="30"><input name="password2" type="password" id="password2" οnblur="checkPassword2()">
<span id="passwordMsg2"><font color="#818181" >请再输入一遍您上面输入的密码</font></span>
</td>
</tr>
<tr>
<td height="40">*Email:</td>
<td height="40"><input name="mail" type="text" id="mail" οnblur="checkEmail(this.value)">
<span id="emailMsg"><font color="#818181"></font></span></td>
</tr>
<tr>
<td height="40">*真实姓名:</td>
<td height="40"><input name="realName" οnblur="checkRealName(this.value)" type="text" id="realName">
<span id="idnumberMsg"><font color="#818181"></font></span>
</td>
</tr>
<tr>
<td height="40">昵称:</td>
<td height="40"><input name="realName2" type="text" id="realName2" value="" οnblur="checkRealName2()">
<span id="realNameMsg2"><font color="#818181"></font></span>
</td>
</tr>
<tr>
<td height="40">*手机号码:</td>
<td height="40"><input name="phone" type="text" id="phone" οnblur="checkPhone(this.value)">
<span id="phoneMsg"><font color="#818181"></font></span>
</td>
</tr>
<tr>
<td height="40">家庭住址:</td>
<td height="40"><input name="address" type="text" id="password2" style=" width:200px;">
</td>
</tr>
<tr>
<td height="40">邮政编码:</td>
<td height="40"><input name="postalcode" type="text" id="password2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" value="同意隐私条款,并提交注册"></td>
</tr>
</table>
</form>
以下是效果图: