form 表单验证

最新推荐文章于 2024-07-17 11:01:31 发布
likaibk
最新推荐文章于 2024-07-17 11:01:31 发布
阅读量402
点赞数
CC 4.0 BY-SA版权
分类专栏： form 表单
本文链接：https://blog.youkuaiyun.com/likaibk/article/details/51886423
form 表单专栏收录该内容
1 篇文章
订阅专栏
<!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>