在提交之前进行表单验证的最佳方法是什么

Question

请有人建议我，

在提交之前进行表单验证的最佳方法是什么？

实际场景就像，我有一个名为保存的按钮，所以当用户按下保存按钮时。

我需要验证数据并将流传递给服务器以将数据存储在表中。

除了在服务器端进行表单数据验证之外，是否有任何可能的方法来检查客户端本身的表单数据

<form>
    <header>
        <h1>Testing </h1>
    </header>
    <p>
        Receipt number:
        <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" /> Type
        <select name="evalu" id="evalu">
            <option value="electrical">Electrical</option>
            <option value="mechanical">Mechanical</option>
        </select>
        cad
        <select name="cd" id="cd">
            <option value="unit1">xv</option>
            <option value="unit2">ed</option>
        </select>
        <input type="button" id="find" value="Find" class="button0" />
        <br>
        <br> Report No
        <input type="text" name="irepno" id="irepno" class="tb1" maxlength="8" /> date
        <input type="text" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>">
        <input type="button" id="search" value="Search" class="button0" />
        <br></br>
        <input type="button" value="Save the record" id="saverecord" class="button0">
    </p>
</form>

Answer 1

Javascript 本身的开发目的是增加客户端的数据处理和验证。

最好的方法取决于您应用的情况以及 javascript 技术。

如果您没有使用任何特定的客户端技术或框架，例如 angularjs 或 emberjs 等。

您可以尝试使用可访问的 jquery 验证插件 https://jqueryvalidation.org/

$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

label,
input {
  display: block;
}
input{
 margin-bottom:15px;
}
label.error {
  color: red;
  margin-top:-10px;
  margin-bottom:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<div class="container">
  <h2>Registration</h2>
  <form action="" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John" />

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe" />

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com" />

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" />

    <button type="submit">Register</button>

  </form>
</div>