jquery名稱驗證使用插件

Question

我想驗證用戶的名字，使其只接受字符。我也想分配一個最大長度驗證，名字不能爲空。

但我只能驗證字符。現在，我想爲首字母設置最大長度，並且在驗證失敗時名稱也不應該爲空，它應該將輸入框的邊框顏色更改爲紅色並給出錯誤消息。

$(document).ready(function(){ 
 
    jQuery.validator.addMethod("lettersonly", function(value, element) { 
 
    return this.optional(element) || /^[a-z\s]+$/i.test(value); 
 
    }); 
 

 
    $('#myForm').validate({ 
 
    rules: { 
 
     firstName: { 
 
      lettersonly: true 
 

 
     } 
 
    }, 
 
    messages:{ 
 
     firstName: { 
 
      lettersonly: "please enter characters only", 
 
     } 
 
    } 
 
    }); 
 
});

.error{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script> 
 

 

 
<form id="myForm"> 
 
    <label for="firstname" id="label1">firstName:</label> 
 
    <input type="text"id="firstName" name="firstName"><br><br> 
 
</form>

Answer 1

您可以使用jQuery的驗證插件內置功能。

https://jqueryvalidation.org/maxlength-method/

返回false，如果該元素是

• 某種文本輸入的，它的值是太長
• 一組複選框具有太多箱檢查
• a select並且選擇的選項太多

Live demo

$('#myForm').validate({ 
rules: { 
    firstName: { 
     lettersonly: true 
     required: true, 
     maxlength: 200 
    } 
}, 
messages:{ 
    firstName: { 
     lettersonly: "please enter characters only", 
     required: "Enter your first name, please.", 
     maxlength: "Funny msg" 
    } 
} 
});