form 表单验证

来源：互联网发布：人人商城分销6.0源码编辑：程序博客网时间：2024/05/17 04:33
<!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" xml:lang="en"><head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />   <title></title></head><body><form method="post" action="form2_pro.php" onsubmit="return checkall();">    <center>      <table border=1>            <h2>欢迎注册学生信息</h2>      <tr>         <td>姓名：</td>         <td>         <input type="text" name="u_name" id="name" onblur="check_name();" onfocus="words('s_name');" placeholder="请输入姓名">         <span id="s_name"></span>         </td>      </tr>      <tr>         <td>密码：</td>         <td>         <input type="password" name="u_pwd" id="pwd" placeholder="请输入密码" onblur="check_pwd();" onfocus="words('s_pwd');">         <span id="s_pwd"></span>         </td>      </tr>      <tr>         <td>确认密码：</td>         <td>         <input type="password" name="u_rpwd" id="rpwd" placeholder="请输入确认密码" onblur="check_rpwd();" onfocus="words('s_rpwd');">         <span id="s_rpwd"></span>         </td>      </tr>      <tr>         <td>性别：</td>         <td>         <input type="radio" name="u_sex" value="男" id="sex1" onclick="check_sex();">男         <input type="radio" name="u_sex" value="女" id="sex2" onclick="check_sex();">女         <span id="s_sex"></span>         </td>      </tr>      <tr>         <td>手机号：</td>         <td>         <input type="text" name="u_tel" id="tel" placeholder="请输入手机号" onblur="check_tel();" onfocus="words('s_tel');">         <span id="s_tel"></span>         </td>      </tr>      <tr>         <td>邮箱：</td>         <td>         <input type="text" name="u_email" id="email" placeholder="请输入邮箱" onblur="check_email();" onfocus="words('s_email');">         <span id="s_email"></span>         </td>      </tr>      <tr>         <td>自我介绍：</td>         <td>         <textarea name="u_jieshao" rows="5" cols="8" id="jieshao" placeholder="请输入自我介绍" onblur="check_jie();" onfocus="words('s_jieshao');" onkeyup="check_shao();"></textarea>         <span id="s_jieshao"></span>         </td>      </tr>      <tr>         <td colspan="2">         <input type="submit" value="登录">         <input type="reset" value="重置">         </td>      </tr>      </table>      </center>    </form>    <script type="text/javascript">    //公共ID    function $(id)    {       return document.getElementById(id);    }    //得到焦点后清除提示    function words(str)    {       document.getElementById(str).innerHTML='';    }    //验证姓名     function check_name()    {       //得到姓名的值       var names=$('name').value;       //正则表达式       var r_name=/^[a-z][a-zA-Z0-9]{4,9}$/i;       if(names=='')       {          $('s_name').innerHTML="<font color='red'>姓名不能为空</font>";          return false;       }       else       {          if(!r_name.test(names))          {           $('s_name').innerHTML="<font color='blue'>姓名必须由5到10位数字或字母组成，不能以数字开头</font>";          return false;          }          else          {           $('s_name').innerHTML="<font color='purple'>√</font>";           return true;          }       }    }    //验证密码    function check_pwd()    {      //得到密码的值     var pwds=$('pwd').value;     //正则表达式       var r_pwd=/^\w{6,}$/;    if(pwds=='')       {          $('s_pwd').innerHTML="<font color='red'>密码不能为空</font>";          return false;       }       else       {          if(!r_pwd.test(pwds))          {           $('s_pwd').innerHTML="<font color='blue'>密码必须6位以上</font>";          return false;          }          else          {           $('s_pwd').innerHTML="<font color='purple'>√</font>";           return true;          }       }    }   //验证确认密码    function check_rpwd()    {      //得到确认密码的值     var rpwds=$('rpwd').value;     //得到密码的值     var pwds=$('pwd').value;         if(rpwds=='')       {          $('s_rpwd').innerHTML="<font color='red'>确认密码不能为空</font>";          return false;       }    else if(rpwds!=pwds)       {                     $('s_rpwd').innerHTML="<font color='blue'>确认密码要与密码保持一致</font>";          return false;         }    else          {           $('s_rpwd').innerHTML="<font color='purple'>√</font>";           return true;          }    }    //验证性别    function check_sex()    {       //得到性别的值       var sex1=$('sex1').checked;       var sex2=$('sex2').checked;       if(!sex1 & !sex2)       {          $('s_sex').innerHTML="<font color='red'>性别必选一项</font>";           return false;       }       else       {          $('s_sex').innerHTML="<font color='purple'>√</font>";           return true;       }    }   //验证手机号    function check_tel()    {      //得到密码的值     var tels=$('tel').value;     //正则表达式       var r_tel=/^1[358]\d{9}$/;    if(tels=='')       {          $('s_tel').innerHTML="<font color='red'>手机号不能为空</font>";          return false;       }       else       {          if(!r_tel.test(tels))          {           $('s_tel').innerHTML="<font color='blue'>手机号必须11位数字，以15,13,18开头</font>";          return false;          }          else          {           $('s_tel').innerHTML="<font color='purple'>√</font>";           return true;          }       }    }    //验证邮箱    function check_email()    {      //得到邮箱的值     var emails=$('email').value;     //正则表达式       var r_email=/^\w+@\w+\.(com|net|cn)$/;    if(emails=='')       {          $('s_email').innerHTML="<font color='red'>邮箱不能为空</font>";          return false;       }       else       {          if(!r_email.test(emails))          {           $('s_email').innerHTML="<font color='blue'>邮箱必须包含@符号，以.net,.com,.cn结尾</font>";          return false;          }          else          {           $('s_email').innerHTML="<font color='purple'>√</font>";           return true;          }       }    }    //验证介绍非空    function check_jie()    {       jieshao=$('jieshao').value;        //r_jieshao=/^\w{1,20}$/;       //num1=jieshao.length;       //num2=20-num1;      if(jieshao=='')      {         $('s_jieshao').innerHTML="<font color='red'>介绍不能为空</font>";         return false;      }      else       {         $('s_jieshao').innerHTML="";           return true;                 }    }    //验证介绍字数    function check_shao()    {       jieshao=$('jieshao').value;       //r_jieshao=/^\w{1,20}$/;       num1=jieshao.length;       num2=20-num1;      if(num1<=20)       {           $('s_jieshao').innerHTML="<font color='blue'>您还可以输入<font color='red'>"+num2+"</font>字</font>";             return true;       }       else       {          $('jieshao').value=$('jieshao').value.substr(0,20);          $('s_jieshao').innerHTML="<font color='red'>您不能再输入了</font>";       }    }    //验证全部信息    function checkall()    {       if(check_name() & check_pwd() & check_rpwd() & check_sex() & check_tel() & check_email() & check_jie() & check_shao())       {         return true;        }       else       {          return false;       }    }    </script> </body></html>
0 0