提交前進行表單驗證的最佳方式是什麼

Question

請有人建議我，

什麼是提交之前進行表單驗證的最佳方式是什麼？

實際情況就好像我有一個叫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>

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

在表單提交，編寫JavaScript或jQuery腳本來驗證並將表單值傳遞給您的servlet。

你也可以使用這個jquery plugin。

Answer 3

這裏有一些很棒的驗證庫。我特別喜歡jQuery.validate.js，因爲它有很好的文檔記錄和易於使用。

如果您希望編寫自己的，一個良好的開端是this W3Schools article on Javascript form validation

Answer 4

我建議你選擇，你可以選擇自己：

1）單擊saverecord按鈕時，將驗證代碼寫入函數中。

2）驗證輸入字段（在您的情況下，我猜「收據編號」和「報告編號」只是編號），您可以編寫函數來處理onkeypress（或onchange）事件以驗證用戶的輸入。

Answer 5

有很多方法來驗證表單。我更喜歡使用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，在這裏你可以學習使用前端開發來驗證表單。

希望這可以解決您的問題。