2015-09-27 118 views
1

我想創建一個取決於其格式的護照驗證,我創建了2個輸入欄。第一個輸入欄只允許用戶輸入2個字母,第二個輸入欄只允許輸入7個數字。什麼JavaScript函數來驗證用戶輸入兩個字母不僅沒有號碼,輸入7個數字不僅沒有對其推崇輸入欄字母護照驗證

這裏是我迄今爲止

<!doctype html> 
 
<html> 
 

 
<body> 
 
<div class="form-group"> 
 
<label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label> 
 
\t \t \t \t \t \t \t \t \t \t 
 
<input size="1" name="passportno" class="form-control" placeholder=""required/> - 
 
<input size="14" name="passportno" class="form-control" placeholder=""required/> 
 
\t \t \t \t \t \t \t \t \t \t 
 
</div> 
 
</script> 
 
</body> 
 
</html>

+2

你有一個具體的問題? – CollinD

+0

感謝您的支持! :D – Vista

+0

@arthur也驗證只輸入數字/字母 – Vista

回答

2

以下代碼顯示提示輸入是否爲有效輸入。如果不是,則警報顯示爲false。將警報替換爲顯示消息或其他內容的代碼。

使用maxlength HTML的最大輸入字符

$(document).ready(function(){ 
 
    $("#submitButton").click(function(){ 
 
     alert(/^\d+$/.test($('#passportNumber').val()));  // 2 digit number validation 
 
     alert(/^[a-zA-Z]+$/.test($('#passportSeries').val())); // 7 character validation 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html> 
 

 
<body> 
 
<div class="form-group"> 
 
<label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label> 
 
\t \t \t \t \t \t \t \t \t \t 
 
<input maxlength="2" id="passportNumber" class="form-control" placeholder=""required/> - 
 
<input maxlength="7" id="passportSeries" class="form-control" placeholder=""required/> 
 
<input type="button" value="submit" id="submitButton" /> \t \t \t 
 
</div> 
 
</script> 
 
</body> 
 
</html>

0

以下屬性是5月的途徑之一。

  • 設置最大長度您輸入
  • 有你輸入唯一的名稱(不一樣)
  • 因爲我沒有看到一個按鈕來驗證,我用KEYUP,輸入(帶副本的交易+粘貼等)

$("input").on("keyup input", function() { 
 
\t 
 
    var $this = $(this); 
 
    var val = $.trim($this.val()) || ""; 
 

 
    if (this["name"] === "passportno") { 
 
    \t val = val.replace(/[^\d]/g, ''); 
 
    } else { 
 
     val = val.replace(/[^a-z]/gi, ''); 
 
    } 
 
\t $this.val(val); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label> 
 

 
    <input size="1" name="passportno" class="form-control" placeholder="" required="" maxlength="2" /> - 
 
    <input size="14" name="passportletters" class="form-control" placeholder="" required="" maxlength="7" /> 
 

 
</div>