美文网首页
表单输入完整性验证(JavaScript)

表单输入完整性验证(JavaScript)

作者: 莫小归 | 来源:发表于2018-08-02 09:58 被阅读0次

    参考链接:

    报表验证:https://blog.csdn.net/qiu512300471/article/details/23259811

    需求:表单输入验证全部不为空则提交表单,否则返回未输入的元素完成输入

    代码:

    1.html

      <form method="post" name="form" action="user.do?method=register" onSubmit="return   beforeSubmit(this);">
         <table border="1" width="100%" cellspacing="0" cellpadding="0">
          <tr><td><label>用户名:<input type="text" name="username" value=""></label></td></tr>
          <tr><td><label>密   码:<input type="password" name="password" value=""></label></td></tr>
          <tr><td><label>重复密码:<input type="password" name="password2" value=""></label></td></tr>
          <tr><td><input value="注册" type="submit"> <input type="reset" value="重置"></td></tr>      
         </table>
        </form>
    

    2.JavaScript

    <script type="text/javascript">
        function beforeSubmit(form) {
          if (form.username.value =='') {
                alert('用户名不能为空!');
                form.username.focus();
                return false;
            }
          if (form.password.value =='') { 
                alert('密码不能为空!');
                form.password.focus();
                return false;
            }
          if (form.password.value.length <6) {
                alert('密码至少为6位,请重新输入!');
                form.password.focus();
                return false;
            }
         if (form.password.value != form.password2.value) {
                alert('你两次输入的密码不一致,请重新输入!');
                form.password2.focus();
                return false;
            }
          return true;        //继续执行之后命令
        }
    </script>
    

    注意:关于JavaScript中的 return、return false 和 return true

    return 用来把控制权返还给页面。

    return false 用来取消默认动作。比如点击一个链接除了触发onclick事件外,还要触发默认的页面跳转事件。你可以在onclick函数中通过 return false 取消默认的页面跳转事件。

    return true 表示本函数执行完毕后,继续执行默认动作。

    闲坐小窗读周易,不知春去几多时

    相关文章

      网友评论

          本文标题:表单输入完整性验证(JavaScript)

          本文链接:https://www.haomeiwen.com/subject/ulhjvftx.html