如何在没有jQuery验证插件和没有提交按钮的情况下在JavaScript中验证表单

How to validate a form in JavaScript without jQuery validation plugin and without submit button

本文关键字：验证 情况下 JavaScript 表单 按钮 插件 jQuery 提交      更新时间：2023-09-26

我在html中有这个表单，我想在用户按下#btnPopup时验证这个表单，这个按钮不是提交一个。我怎么能做到这一点，而不使用jQuery验证插件，在一个点击按钮?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmUsers" data-userid="">
  <img id="btnClose" src="resources/img/close_window.png">
  <h2 id="popupTitle"></h2>
  <ul>
    <li>
      <label for="username">Username:</label>
      <input type="text" id="username" name="txtUsername" placeholder="Please select username" required/>
    </li>
    <li>
      <label for="level">Level:</label>
      <input type="number" id="level" name="txtLevel" placeholder="Please select level" required/>
    </li>
    <li>
      <label for="registrationStatus">RegistrationStatus:</label>
      <select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status" class="required">
        <option value="Registered">Registered</option>
        <option value="Unregistered">Unregistered</option>
      </select>
    </li>
    <li>
      <label for="registrationDate">RegistrationDate:</label>
      <input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" required/>
    </li>
    <div class="btnZone">
      <input class="btnDown" type="button" value=" " id="btnPopup" />
      <input class="btnDown" type="button" value="Cancel" id="btnCancel">
    </div>
  </ul>
</form>

您可以使用ajax通过发送表单输入参数来实现您想要的，并将事件附加到您的按钮。

$('#btnPopup').on('click', function(){
    // Fields validation
    if( validation ){
        $.ajax({
            method: "POST",
            url: "your_url",
            dataType: 'json',
            data: {
                'username' : $('#username').val(),
                'level' : $('#level').val()
                ...
            }
        })
        .done(function( result ) {
            // Do something
        })
        .fail(function(result, textStatus) {
            // Do something when error happened
        });
    }else{
        // Do something when your validations are bad.
    }
});

不要忘记在服务器端验证参数。验证客户端可以很容易地通过。之后，您可以在ajax成功回调

中获得服务器响应。

您可以通过在#btnPopup上附加一个"Click"侦听器并在其中添加一个简单的提交:

var myButton = document.getElementById("btnPopup");
myButton.addEventListener("click" , function(){
    /*
        --Your Validation logic goes here--
    */
    // You submit the Form when the Validation is over.
    document.getElementById("frmUsers").submit();
});

现在您可以根据您想要验证表单的内容编写自己的Validation函数。一个非常简单和非常基本的验证将是创建一个通用函数，并按如下方式验证每个字段:

function validate(inputField){
  var myInputField = document.forms["frmUsers"][inputField].value;
  // Add some simple Validation Rules 
  if(myInputField == null || myInputField == ""){
    // Do Something if validation fails [Eg: alert('error!!!');]
    return false;
  }
}

你可以这样使用上面的函数:

validate("txtUsername");

显然，您可以创建一个循环，遍历表单中的每个字段并对其进行验证。通常有很多方法来验证表单，上面的例子会让你在正确的轨道上。

重要:这是一个客户端验证。请记住，在100种情况中，有99种情况也需要配置服务器端验证。客户端验证不是100%安全的

是的，你可以做到。下面是示例代码，您可以使用

function validateForm() {
    var x = document.forms["frmUsers"]["registrationDate"].value;
    if (x == null || x == "") {
        alert("Registration date must be filled out");
        return false;
    }
}
<input class="btnDown" type="button" value=" " id="btnPopup" onclick="return validateForm();/>

相关文章：