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

Posted 2021-03-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在提交之前进行表单验证的最佳方法是什么相关的知识，希望对你有一定的参考价值。

请有人建议我，

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

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

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

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

<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>

答案

javascript本身的开发旨在添加数据和验证的客户端处理。

最好的方法取决于您申请的情况以及JavaScript技术。

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

您可以尝试使用qazxsw poi上提供的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;
}

另一答案

验证表单的方法有很多种。我更喜欢使用html元素验证表单，这是检查输入详细信息的快速方法。

这是一个代码片段，用于验证客户端以简单形式输入的详细信息。

<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>

很少有类型，maxlength，pattern，required，size等元素用于验证客户端的表单。

我喜欢这本书<fieldset> <legend>Enter Your Details</legend> <p> <label for="fave"> Mobile: <input maxlength="10" autofocus="on" autocomplete="on" name="mobile" placeholder="Mobile number"/> </label> </p> <p> <label for="name"> Name: <input maxlength="30" pattern="^.* .*$" required size="15" name="name" placeholder="Your name"/> </label> </p> <p> <label for="password"> Password: <input type="password" required name="password" placeholder="Min 6 characters"/> </label> </p> <p> <label for="email"> Email: <input type="email" pattern=".*@mydomain.com$" placeholder="user@domain.com" id="email" name="email"/> </label> </p> <p> <label for="tel"> Tel: <input type="tel" placeholder="(XXX)-XXX-XXXX" id="tel" name="tel"/> </label> </p> <p> <label for="url"> Your homepage: <input type="url" id="url" name="url"/> </label> </p> </fieldset>，在那里你可以学习使用前端开发验证表单。

希望这能解决你的问题。

另一答案

在表单提交上，编写javascript或jquery脚本以验证并将表单值传递给servlet。

你也可以使用这个The Definitive Guide to HTML5。

另一答案

那里有一些很棒的验证库。我特别喜欢的是jquery plugin，因为它有很好的文档和易于使用。

如果你更喜欢自己写，那么开始的好地方就是jQuery.validate.js

另一答案

我建议你选择，你可以自己选择：

1）单击saverecord按钮时，在函数内写入验证代码。

2）验证输入字段（在您的情况下我猜“收据号码”和“报告号码”只是号码），您可以编写处理onkeypress（或onchange）事件的函数来验证用户输入的内容。

以上是关于在提交之前进行表单验证的最佳方法是什么的主要内容，如果未能解决你的问题，请参考以下文章