Question

请有人建议我，

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

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

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

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

＆＃13;

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

＆＃13;

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>

Answer 2

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

以下是我用于验证客户端以简单形式输入的详细信息的代码段。

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

很少有像这样的元素类型， maxlength ，模式，必需，尺寸用于验证客户端的表单。

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

希望这能解决你的问题。

Answer 3

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

您也可以使用此jquery plugin。

Answer 4

那里有一些很棒的验证库。我特别喜欢的是jQuery.validate.js因为它有详细记录且易于使用。

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

Answer 5

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

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

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

在提交

5 个答案: