如何在jQuery中爲以下代碼編寫驗證？

Question

在這裏，在我的代碼名和姓字段並排放置，如何編寫這2場我嘗試了驗證，但我沒有得到correct.I附加圖像及以下

jQuery代碼我的代碼：

jQuery(function(){ 

      jQuery("#fName").validate({ 

       expression: "if (VAL.match(/^[a-zA-Z]{2,30}$/)) return true; else return false;", 

       message: "Please enter the First Name Last Name" 

      }); 
     }); 

signup.html

<div class="form-fullname"> 
     <input class ="first-name"type="text" id="fName" name="firstname" placeholder="First name" required=""> 

     <input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" required=""> 
    </div> 

完整的頁面是一個錯誤的形象。

錯誤： 在這個註冊表單中，當我輸入名字時，它應該在下面顯示錯誤信息，但它顯示在圖片所示的名旁。那麼你能告訴我如何在下面得到錯誤信息。

Answer 1

您可以在JavaScript的正則表達式中使用測試函數來知道輸入是否爲有效格式。

使用css函數顯示或隱藏錯誤消息。

如果你想在名字字段關注時顯示名字字段的錯誤，你可以在jQuery中寫入一個聚焦事件。

$(document).ready(function() { 
 

 
    var NAME_REGEX = /^[a-zA-Z]{2,30}$/; 
 

 
    $('#signupBtn').click(signupBtnClick); 
 
    
 
    $('input[name="lastname"]').focus(lastNameOnFocus); 
 
    
 
    function signupBtnClick() { 
 
    validateFirstName(); 
 
    validateLastName(); 
 
    } 
 
    
 
    function lastNameOnFocus() { 
 
    validateFirstName(); 
 
    } 
 
    
 
    function validateFirstName() { 
 
    var firstName = $('input[name="firstname"]').val(); 
 
    
 
    if(NAME_REGEX.test(firstName)) { 
 
    \t $('#firstnameerror').css('display', 'none'); 
 
    } else { 
 
    \t $('#firstnameerror').css('display', 'block'); 
 
    } 
 
    } 
 
    
 
    function validateLastName() { 
 
    var lastName = $('input[name="lastname"]').val(); 
 
    
 
    if(NAME_REGEX.test(lastName)) { 
 
    \t $('#lastnameerror').css('display', 'none'); 
 
    } else { 
 
    \t $('#lastnameerror').css('display', 'block'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div> 
 
    <h3>Sign Up</h3> 
 
</div> 
 

 
<div> 
 
    <input type="text" name="firstname" placeholder="First Name"> 
 
    <span id="firstnameerror" style="color: red; display: none;">First Name is required</span> 
 
</div> 
 

 
<div style="margin-top: 1%;"> 
 
    <input type="text" name="lastname" placeholder="Last Name"> 
 
    <span id="lastnameerror" style="color: red; display: none;">Last Name is required</span> 
 
</div> 
 

 
<div style="margin-top: 2%;"> 
 
    <button type="button" id="signupBtn">Submit</button> 
 
</div>

Answer 2

嘗試添加上而是輸入標籤上的正則表達式：

<form action="register_page"> 
    <div class="form-fullname"> 
     <input class ="first-name" type="text" id="fName" name="firstname" placeholder="First name" pattern="^\w{2,30}$" required> 

     <input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" pattern="^\w{2,30}$" required> 
    </div> 
    <input type="submit" value="Register"> 
</form> 

請注意，您可以在正則表達式，而不是[A-ZA-Z]使用\ W上。這樣你就不需要在這種情況下進行jquery驗證。