html+js实现form表单多值的验证

最新推荐文章于 2024-06-26 17:46:49 发布

ikesi-X

最新推荐文章于 2024-06-26 17:46:49 发布

阅读量1.7k

点赞数 1

分类专栏： html javascript 文章标签： html 表单 javascript

本文链接：https://blog.csdn.net/qq_22793991/article/details/53129965

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

实现form表单同时验证多条数据。
1.html部分与js缩进有些不太一样，不影响内容
2.截图没传上去，请自行复制代码查看
注意：需要验证的html部分写到最前面，比如名字，性别，和邮箱要验证，就写到最上面，不然会因为中间有不需要验证的内容而报错。

话不多说，直接写代码：

<html>
    <head>
    <style type="text/css">
        table,td,th
          {
          border:1px solid black;
          }
    .error {color: #FF0000;}
        table
          {
          text-align:center;
          width:800px;
          }
        input
          {
          text-align:center;

          }
        th
          {
          height:50px;
          }
    </style>
  <script type="text/javascript">

    function check(){

      var test = document.getElementById("surnameId").value;
      if (test.length < 1 ) {
        alert("姓不能为空");
        document.getElementById("surnameId").focus();
        return false;
      }

      var test = document.getElementById("nameId").value;
      if (test.length < 1 ) {
        alert("名不能为空");
        document.getElementById("nameId").focus();
        return false;
      }

      var test = document.getElementById("sexId").value;
      if (test.length < 1 ) {
        alert("性别不能为空");
        document.getElementById("sexId").focus();
        return false;
      }

      var email = document.getElementById("emailId").value;
      if (email != "") {
         var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
         isok= reg.test(email);
           if (!isok) {
                alert("邮箱格式不正确，请重新输入！");
                document.getElementById("emailId").focus();
                return false;
            }
        }
        return true;
    }
  </script>
    </head>

    <body>
        <form method="post" action="show.php" onSubmit="return check()">  
            <table>
                <tr>
                    <th><h2>登录</h2></th>
                </tr>
                <tr>
                    <table>
                        <tr>
                            <td>姓：</td>
                            <td><input type="text" name="surname" id = "surnameId"> 例如： 张
                          <span class="error">* 姓是必须的</span>
                    </td>
                        </tr>

                        <tr>
                            <td>名：</td>
                            <td><input type="text" name="name" id = "nameId"> 例如： 三
                        <span class="error">* 名必须写</span>
                    </td>
                        </tr>
                  <tr>

                    <td>性别：</td>
                    <td>
                      <input type="radio" id = 'sexId' name="sex" value="female" checked>女性
                      <input type="radio" id = 'sexId' name="sex" value="male">男性 
                      <span class="error">* 性别必选</span>
                    </td>
                  </tr>

                        <tr>
                            <td>电邮：</td>
                            <td><input type="text" name="email" id = "emailId"> 例如： ******@qq.com</td>
                        </tr>

                        <tr>
                            <td>生日:</td>
                            <td><input type="date" name="birthday"> 例如： 1992/06/01</td>
                        </tr>

                  <tr>
                    <td>手机:</td>
                    <td><input type="text" name="phone" id = "phoneId"> 例如： 132****1234</td>
                  </tr>

                        <tr>
                            <td>学校:</td>
                            <td><input type="text" name="school"> 例如： 学校.专业</td>
                        </tr>

                        <tr>
                            <td>技能：</td>
                            <td><input type="text" name="ability"></td>
                        </tr>
                    </table>
                </tr>
                <tr>
                    <td><input type="submit" name="submit" value="提交" > </td>
                    <td><input name=reset type=reset value=重置></td>
                </tr>
            </table>
        </form>
    </body>
</html>