Html JS实现表单验证

最新推荐文章于 2025-06-11 21:14:22 发布
原创最新推荐文章于 2025-06-11 21:14:22 发布 · 7.7k 阅读
13 ·
CC 4.0 BY-SA版权
文章标签：
#html #JS表单验证 #JS入门 #JS基础 #JavaScript
JavaScript 专栏收录该内容
8 篇文章
订阅专栏
本文介绍了一个使用JavaScript实现的基础表单验证案例，涵盖账号、密码、邮箱等多种字段的有效性检查，并实现了错误提示与焦点定位功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!--这是一个用JS做的一个html的表单验证，用的都是比较基础的知识，合适JS初学者，
功能有：各种表单验证，实现单击页面即可验证文本内容，如果不符合规则即无法提交表单，
实现不符合规则的文本框在点提交的时候自动聚焦到未填写的文本框，实现屏蔽右键查看代码-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body oncontextmenu="return false;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="100" colspan="3">
      <img src="img/3.jpg" width="600" height="112"></td>
    </tr>
  <tr>
    <td width="15%" height="500"> </td>
    <td width="500" height="500" align="center" valign="top"><p>
    <fieldset><legend>
    <a style="font-size: 40px; color: red; font-weight: bold;">注册中心</a></legend>    
    <form action="" method="post" onclick="Rabbit();" id="watt">
    <table width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr align="center" valign="middle">
    <td height="50" colspan="2">
     <a style="font-size: 28px; font-weight: bold;">基本信息<br>
     </a></td>
    </tr>
  <tr>
    <td width="30%" height="30" align="right" valign="middle">
     用 户 名 ：
    </td>
    <td width="70%" height="30">  <input type="text" name="code" id="code" autofocus="autofocus" placeholder="账号为6~12位之间的数字或者字母" style="width:200px;">
    <span id="codeInfo"></span>
    </td>
  </tr>
  <tr>
    <td height="30" align="right" valign="middle">登录密码 ：</td>
    <td height="30">  <input type="password" id="password" name="password" placeholder="密码为8~12位之间的数字或者字母"   style="width:200px;">
    <span id="passwordInfo"></span>
    </td>
  </tr>
  <tr>
    <td height="30" align="right" valign="middle">重输密码 ：</td>
    <td height="30">  <input type="password" name="password2" id="password2" placeholder="密码为8~12位之间的数字或者字母" style="width:200px;">
    <span id="password2Info"></span>
    </td>
  </tr>
  <tr>
    <td height="30" align="right" valign="middle">性    别 ：</td>
    <td height="30">  <input type="radio" name="gender" id="man" value="man"><label for="man" style="cursor: pointer;">男</label>
        
    <input type="radio" name="gender" id="woman" value="woman"><label for="woman" style="cursor: pointer;">女</label> <span id="genderInfo"></span></td>


  </tr>
  <tr>
    <td height="30" align="right" valign="middle">爱    好 ：</td>
    <td height="30">
   <input type="checkbox"  name="hobby" value="睡觉" id="hobby">睡觉
    <input type="checkbox"  name="hobby" value="打酱油">打酱油
    <input type="checkbox"  name="hobby" value="吃饭">吃饭
   <input type="checkbox"  name="hobby" value="打豆豆">打豆豆
    <span id="hobbyInfo"></span>
    </td>
  </tr>
  <tr>
    <td height="30" align="right" valign="middle">年龄阶段 ：</td>
    <td height="30">
      <select id="age"  name="age" style="width:150px;">
    <option value="">-请选择-</option>
    <option value="01岁一20岁">-01岁一20岁-</option>
    <option value="21岁一30岁">-21岁一30岁-</option>
    <option value="31岁一30岁">-31岁一30岁-</option>
    <option value="41岁一40岁">-41岁一40岁-</option>
    <option value="51岁以上">-51岁以上-</option>
    </select>
     <span id="ageInfo"></span>
    
    </td>
  </tr>
  <tr>
    <td height="30" align="right" valign="middle">电子邮箱 ：</td>
    <td height="30">
      <input type="text" name="email" id="email" placeholder="请输入正确的电子邮箱"  style="width:200px;">
      <span id="emailInfo"></span>
    </td>
  </tr>
  <tr>
    <td height="30" align="right" valign="middle">手机号码 ：</td>
    <td height="30">  <input type="text" name="Mobile" id="Mobile" placeholder="请输入正确的手机号码" style="width:200px;">
    <span id="MobileInfo"></span>
    </td>
  </tr>
  <tr>
    <td height="30" colspan="2" align="center" valign="middle"><a style="font-size: 25px; color: red; font-weight: bold;">用户注册协议：</a></td>
  </tr>
  <tr>
    <td height="30" colspan="2" align="center" valign="middle"> <span style="font-size:20px;font-weight:bold">注册协议<br>
【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：<br>
1、与您约定免除或限制责任的条款；<br>
2、与您约定法律适用和管辖的条款；<br>
3、其他以粗体下划线标识的重要条款。<br>
如您对协议有任何疑问，可向平台客服咨询。<br>
【特别提示】当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容。如您因平台服务与**发生争议的，适用《平台服务协议》处理。如您在使用平台服务过程中与其他用户发生争议的，依您与其他用户达成的协议处理。
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。<br>
《服务协议》<br>
《法律声明及隐私权政策》<br>
《服务协议》<br>
</span></td>
    </tr>
  <tr>
    <td height="50" colspan="2" align="center" valign="middle"><input type="checkbox" id="agree" checked="checked" onclick="isAgree();" /> <span style="color:red;font-size:15px;">我已阅读并同意相关服务条款和隐私政策</span>
    </td>
  </tr>
  <tr>
    <td height="50" colspan="2" align="center" valign="middle">
      <input type="button" value="提交" id="submit" onclick="index();">
              
      <input type="reset" value="清空" ></td>
    </tr>
</table>
</form>
    </fieldset>
    
    <td width="15%" height="500"> </td>
  </tr>
  <tr>
    <td colspan="3"> </td>
  </tr>
</table>
<script>
      
        /*
       * 是否同意协议
       */
      function isAgree() {
        var agreeDOM = document.getElementById('agree');
        var submitDOM = document.getElementById('submit');
        if (agreeDOM.checked) {
          submitDOM.disabled = false;
        } else {
          submitDOM.disabled = true;
        }
      }
       /*
      *账号验证
      */
      function checkCode() {
        var result = true;
        var code = document.getElementById('code').value;
        if (code == '') { 
          document.getElementById('codeInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>账号不能为空!</span>';
          result = false;
        }
        else if (code.length <6 || code.length >12) {
          document.getElementById('codeInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>账号必须为6~12位之间!</span>';
          result = false;
        }
        else if (!/^[0-9A-z]+$/.test(code)) { 
          document.getElementById('codeInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>账号必须为数字或者字母组成!</span>';
          result = false;
        }else {
          document.getElementById('codeInfo').innerHTML = '<img src="img/accept.png"/>';
           result = true;
        }
        
        return result;
      }


      /*
      *密码验证
      */
      function password(){
        var result = true;
        var password = document.getElementById('password').value;
        if(!/^[0-9A-z]+$/.test(password)){
             document.getElementById('passwordInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>密码必须为数字或者字母组成!</span>';
             result = false;
        }else if(password.length < 8 || password.length > 12 || password == '') {
          document.getElementById('passwordInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>密码必须为8~12位之间!</span>';
          result = false;
        }
        else {
          document.getElementById('passwordInfo').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
      }
        function password2(){
        var result = true;
        var password = document.getElementById('password').value;
        var password2 = document.getElementById('password2').value;
        if (password2 == ''){
          document.getElementById('password2Info').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>请输入密码！</span>';
          result = false;
        }else if(password2 != password) {
          document.getElementById('password2Info').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>两次密码输入不一致！</span>';
          result = false;
        }else {
          document.getElementById('password2Info').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
      }
      /*
      *性别验证
      */
      function gender(){
        var result = true;
        var gender = document.getElementsByName('gender');
        var genderCount = 0;
        for (var i = 0; i < gender.length; i++) {
          if (gender[i].checked) {
            break;
          } else {
            genderCount++;
          }
        }
        if (genderCount == gender.length) {
          document.getElementById('genderInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>性别不能为空！</span>';
          result = false;
        } else {
          document.getElementById('genderInfo').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
      }
      /*
      *爱好验证
      */
      function hobby(){
        var result = true;
        var hobby = document.getElementsByName('hobby');
        var hobbyCount = 0;
        for (var i = 0; i < hobby.length; i++) {
          if (hobby[i].checked) {
            hobbyCount++;
          }
        }
        if (hobbyCount < 1) {
          document.getElementById('hobbyInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>请最少选择一个！</span>';
          result = false;
        }else if (hobbyCount > 3) {
          document.getElementById('hobbyInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>最多选择三个！</span>';
            result = false;
        }
         else {
          document.getElementById('hobbyInfo').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
      }
       /*
       * 年龄验证
       */
       function age(){
        var result = true;
        var age = document.getElementById('age').value;
        if (age == '') {
          document.getElementById('ageInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>年龄选项不能为空！</span>';
          result = false;
        } else {
          document.getElementById('ageInfo').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
       }
      /*
       * Email验证
       */
      function checkEmail() {
        var result = true;
        var emailDOM = document.getElementById('email').value;
        if(emailDOM == ''){
          document.getElementById('emailInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>邮箱不能为空格！</span>';
           result = false;
        } 
        else if (!/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(emailDOM)) {
          document.getElementById('emailInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>邮箱格式不正确！</span>';
          result = false;
        }
        else {
          document.getElementById('emailInfo').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
      }
       /*
      *手机号码验证
      */
      function Mobile(){
        var result = true;
      var MobileDOM = document.getElementById('Mobile').value;
        if(!/^\d{11}$/.test(MobileDOM)) {
          document.getElementById('MobileInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>必须是11位的手机号码！</span>';
          result = false;
        }else if(MobileDOM == ''){
          document.getElementById('MobileInfo').innerHTML = '<span style="color:red;"><img src="img/warn.png"/>手机号码不能为空格！</span>';
          result = false;
        }
         else {
          document.getElementById('MobileInfo').innerHTML = '<img src="img/accept.png"/>';
          result = true;
        }
        return result;
      }
      /*
      *表单的Submit验证
      */
      function Rabbit(){


        var Rabit = new Array();
        Rabit[0] = checkCode();//账号
        Rabit[1] = password();//密码
        Rabit[2] = password2();//重复密码
        Rabit[3] = checkEmail();//电子邮箱
        Rabit[4] = gender();//性别
        Rabit[5] = hobby();//爱好
        Rabit[6] = Mobile();//电话
        Rabit[7] = age();//年龄
        return Rabit;
       
        //alert('请正确并完整的输入注册信息');
      }
      /**
      *提交后的判断
      */
      function index(){
        var w = new Array();
        w = Rabbit();
        var a = 0;
        var s = 1;
        for (var i = 0; i <= 7; i++) {
          if(w[i]==true){
          a++;console.warn(a);
          }
          console.warn(w[i]);
        }
        
        if (a == 8) {
          window.location.href='Rabbit.html'; 
        }
        else{
        alert('请按规定输入完整的注册资料！');
        var Rabit;




        Rabit = Mobile();
         if (Rabit == false) {
          var Mobilefocus = document.getElementById('Mobile');
          Mobilefocus.focus();
        }
        Rabit = checkEmail();
         if (Rabit == false) {
          var emailfocus = document.getElementById('email');
          emailfocus.focus();
        }
        Rabit = age();
         if (Rabit == false) {
          var agefocus = document.getElementById('age');
          agefocus.focus();
        }
        Rabit = hobby();
         if (Rabit == false) {
          var hobbyfocus = document.getElementById('hobby');
          hobbyfocus.focus();
        }
        Rabit = gender();
         if (Rabit == false) {
          var genderfocus = document.getElementById('man');
          genderfocus.focus();
        }


        Rabit = password2();
         if (Rabit == false) {
          var password2focus = document.getElementById('password2');
          password2focus.focus();
        }
        Rabit = password();
        if (Rabit == false) {
          var passwordfocus = document.getElementById('password');
          passwordfocus.focus();
        }
        Rabit = checkCode();
        if (Rabit == false) {
          var codefocus = document.getElementById('code');
          codefocus.focus();
        }




        }
      }
</script>
</body>
</html>