蜗牛—JavaScript学习之表单验证

来源：互联网发布：模拟退火算法matlab 编辑：程序博客网时间：2024/05/30 22:45
<!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=gb2312" /><title>用户注册</title>   <style type="text/css">       ul {list-style-type:none;}    ul li {margin-bottom:15px;}   .myclock{font-size:12px;color:#0000CC;}    .front_input {width:150px;display:block;text-align:right;}    .front_input,ul li input {float:left;}    .after_input {margin-left:5px;color:#FF0000;font-size:14px;folat:left;}     ul input {width:200px;height:18px;}    .front_input {clear:both;}   </style>   <script type="text/javascript">   function showtime(){var now = new Date();var year = now.getFullYear();var month = now.getMonth()+1;var dath = now.getDate();var hour = now.getHours();var mi = now.getMinutes();var se = now.getSeconds();if (mi < 10) //如果分钟只有1位，补0显示mi="0"+mi;if (se < 10) //如果秒数只有1位，补0显示se="0"+se;if(hour<12)document.myform.myclock.value=hour+":"+mi+":"+se+" AM";if(hour>12)document.myform.myclock.value=(hour-12)+":"+mi+":"+se+" PM";var myTime = setTimeout("showtime()",1000);//每1000毫秒，调用函数显示}          function check_username(){     var username;     username = document.getElementById('username').value;     //username = username.Trim();     if (username == "") {      document.getElementById('username_error').innerHTML = "请输入用户名";      } else {       if (/^\w{6,20}$/.test(username)) {        document.getElementById('username_error').innerHTML = "";        } else {        document.getElementById('username_error').innerHTML = "请输入6 ~ 20 字符【0-9】【a-z-A-Z】";        }     }    }    /**    *检查Email    */    //---------------------------------------------------------------------------    function check_email(){     var email;     email = document.getElementById('email').value;    // email = email.Trim();     if (email == "") {      document.getElementById('email_error').innerHTML = "请输入Email";      } else {       if (/^[\w-]+[\.]*[\w-]+[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(email)) {        document.getElementById('email_error').innerHTML = "";        } else {        document.getElementById('email_error').innerHTML = "请输入有效的Email地址";        }            }     }    /**    *检查密码    */    //---------------------------------------------------------------------------    function check_pass(){     var pass;     pass = document.getElementById('pass').value;   //  pass = pass.Trim();     _pass = pass;     if (pass == "") {      document.getElementById('pass_error').innerHTML = "请输入密码";      } else {       if (/^\w{6,20}$/.test(pass)) {        document.getElementById('pass_error').innerHTML = "";        } else {        document.getElementById('pass_error').innerHTML = "请输入6 ~ 20 字符【0-9】【a-z-A-Z】";        }            }     }    /**    *检查rpass    */    //---------------------------------------------------------------------------    function check_rpass(){     var rpass;     rpass = document.getElementById('rpass').value;    // rpass = rpass.Trim();     if (rpass == "") {      document.getElementById('rpass_error').innerHTML = "请输入确认密码";      }      else if (rpass !=_pass) {      document.getElementById('rpass_error').innerHTML = "密码不一致";      }     else {      document.getElementById('rpass_error').innerHTML = ""      }         } //-----------------------------------------------------------------------------  function check_tel(){     var tel;     tel = document.getElementById('tel').value;   //  tel = tel.Trim();     if (tel== "") {      document.getElementById('tel_error').innerHTML = "请输入电话号码";      } else {       if (tel.length==11) {        document.getElementById('tel_error').innerHTML = "";        } else {        document.getElementById('tel_error').innerHTML = "请输入11位数字";        }     }    }    //---------------------------------------------------------------------------    function regist(){     var username_error=document.getElementById('username_error').innerHTML;     var pass_error=document.getElementById('pass_error').innerHTML;     var rpass_error=document.getElementById('rpass_error').innerHTML;     var email_error=document.getElementById('email_error').innerHTML;  var tel_error=document.getElementById('tel_error').innerHTML;     var username=document.getElementById('username').value;     var pass=document.getElementById('pass').value;     var rpass=document.getElementById('rpass').value;     var email=document.getElementById('email').value; var email=document.getElementById('tel').value;         //判断错误信息全部为空并且文本框全部不为空     if ((username_error == "" && pass_error == "" && rpass_error == "" && email_error == "")&&(username != "" && pass != "" && rpass != "" && email != "")) {      alert ("恭喜，注册成功!");      } else {       alert ("注册信息填写错误，请仔细检查更正后再提交");             }             }          </script></head><body onload="showtime();" bgcolor="#FFCC66">用户注册表单<hr><form name="myform" method="post"><input class="myclock" name="myclock" size="20" disabled/>   <ul>    <li>     <span class="front_input">用户名:</span><input id="username" type="text" class="_input" onfocus="check_username()" onblur="check_username()" /><span id="username_error" class="after_input"></span>    </li>    <li>     <span class="front_input">密码:</span><input id="pass" type="password" class="_input" onfocus="check_pass()" onblur="check_pass()" /><span id="pass_error" class="after_input"></span>    </li>    <li>     <span class="front_input">确认密码:</span><input id="rpass" type="password" class="_input" onfocus="check_rpass()" onblur="check_rpass()" /><span id="rpass_error" class="after_input"></span>    </li><li><span class="front_input">职业：</span><select name="sel" ><option value="">教师</option><option value="">学生</option><option value="">职工</option><option value="">农民</option><option value="">机关干部</option><option value="">歌手</option></select><br></li>    <li>     <span class="front_input">邮箱:</span><input id="email" type="text" class="_input" onfocus="check_email()" onblur="check_email()" /><span id="email_error" class="after_input"></span>    </li>    <li>    <span class="front_input">电话:</span><input id="tel" type="text" class="_input" onfocus="check_tel()" onblur="check_tel()" /><span id="tel_error" class="after_input"></span>    </li>    <li>     <span class="front_input"> 个人简介：</span>    <textarea id="intro" cols="30" rows="4"></textarea>  </li>   </ul>   <div style="clear:both;margin-left:330px;margin-top:50px;">   <input type="submit" value="注册" onclick="regist()">    <input type="reset" value="重置">    </form>   </div></body></html>
0 0