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

【问题标题】：What is the best way to do form validation before submitting在提交之前进行表单验证的最佳方法是什么
【发布时间】：2017-07-23 01:58:20
【问题描述】：

请有人建议我，

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

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

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

除了在服务器端进行表单数据验证之外，还有什么方法可以在客户端本身进行检查

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

【解决方案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>

【讨论】：

例如.+1
即使您的回答非常具有解释性。我想向初学者提一下，可以从浏览器中禁用 javascript，这意味着您也应该使用服务器端验证作为备份。

【解决方案2】：

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

这是我用来验证客户以简单形式输入的详细信息的代码 sn-p。

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

很少有元素喜欢类型、最大长度、模式、必需、尺寸用于在客户端验证表单。

我喜欢 The Definitive Guide to HTML5 这本书，您可以在其中学习使用前端开发验证表单。

希望这能解决您的问题。

【讨论】：

【解决方案3】：

在提交表单时，编写 javascript 或 jquery 脚本来验证表单值并将其传递给您的 servlet。

你也可以使用这个jquery plugin。

【讨论】：

你的意思是。在 jquery 中验证表单并使用 ajax 调用将流程传递给 servlet？
我想听听你的意见。目前我只按照你提到的方式进行编码.. 形式--。到 jequery——通过 ajax 调用从 jquery 到 servlet。但正如丹尼尔上面提到的，这也是一种验证方式。那么最好的方法是什么？
编写自己的验证代码需要额外的代码行和时间，检查每个字段。如果您使用插件，它会更快，因为您需要提及字段名称和根据您的验证条件显示的消息。

【解决方案4】：

那里有一些很棒的验证库。我特别喜欢jQuery.validate.js，因为它有据可查且易于使用。

如果您更愿意自己编写，一个不错的起点是this W3Schools article on Javascript form validation

【讨论】：

感谢您的意见。让我检查一下

【解决方案5】：

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

1) 单击保存记录按钮时，在函数内编写验证代码。

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

【讨论】：