JavaScript和HTML表单验证

Question

我尝试对按钮进行简单的验证，但是当我单击按钮而不输入任何内容时，它仍然转到testValidation1.html而不是弹出警报窗口。

<html>

<head>
</head>

<body>

      <form action="testValidation1.html">

         Parameter1 : 
          <input type = 'text' name = 'param1'/><br>

          <input type='submit' value = 'submit' onclick = 'return validateForm()'>
      </form>

      <script type="text/javascript">

      function validateForm() {
             var f1 = document.forms[0];
             var p1 = f1.param1;

             if(p1.value.length == 0) {

                alert('Plz enter parameters');
                p1.focus();
                return false;
             }  
     }

      </script>


</body>
</html>

Answer 1

您可能会发现使用表单的Submit事件更容易进行验证

function validateForm(event) {
    var form = this;
    var p1 = form.elements['param1'];
    if(p1.value.length === 0) {
        alert('Plz enter parameters');
        p1.focus();
        event.preventDefault();
        return false;
    }
}

document.getElementById('form').addEventListener('submit', validateForm);

http://jsfiddle.net/7j0usuam/

JavaScript和HTML表单验证

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-20 21:14:17

JavaScript和HTML表单验证

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-20 21:14:17

解决方案1
2 已采纳 2014-11-20 21:14:17