from表单提交之前数据判空

最新推荐文章于 2020-11-29 05:41:16 发布

转载最新推荐文章于 2020-11-29 05:41:16 发布 · 375 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xianting/p/9838925.html

文章标签：

#前端 #javascript #ViewUI

本文介绍了一种使用HTML和JavaScript进行表单验证的方法，通过onsubmit事件阻止无效表单提交，确保用户输入的数据符合预期格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在input标签中写onclick事件，不管返回是真是假都会继续提交表单。

使用onsubmit事件

   <form action="login.html" method='post' onsubmit="return check();">
          姓名：<input type='text' name='name' id='name' size='12' maxlenght='6' value=''></input>
          <br/>
          密码：<input type='password' name='password' id='password' size='12' maxlength='10' value=''></input>
          <br/>
          男<input type='radio' name='sex' value='男' checked></input>女<input type=radio name='sex' value='女'></input>
          <br/>
    <input type='submit' value='登陆'></input>
    <input type='reset' value='重置' ></input>
    </form>
    <script type="text/javascript">
        function check() {
            var name = document.getElementById("name").value;
            if(name == '') {
                alert("姓名不能为空!");
                return false;
            }
            var password = document.getElementById("password").value;
            if(password == '') {
                alert("密码不能为空!");
                return false;
            } else if (password.length() < 6 || password.length() > 10) {
                alert("密码长度在6到10位之间!");
                return false;
            }
            /* var sex = document.getElementsByName("sex");
            if(!sex[0].checked && !sex[1].checked) {
                alert("性别项不能为空!");
                return false;
            } */
            return true;
        }
    </script>