0

2日間苦労している問題があります。電話番号を要求する Web ページがあり、電話番号の「バリデーター」を入力タブに作成しようとしていますが、入力タブの最小長を確認する方法がわかりません。数字のみを受け入れる方法。コードは次のとおりです。

    $("#start").click(function(){ // click func
    if ($.trim($('#phonenr').val()) == ''){
     $("#error").show();

追加してみました：

     if ($.trim($('#phonenr').val()) == '') && ($.trim($('#phonenr').val().length) < 15)

しかし、それはうまくいきません。どんな助けでも大歓迎です。また、数字のみを許可する方法を教えてください。

ありがとうございました！

@Saumya Rastogi の助けを借りた最終的なコード。$("#start").クリック(関数(){

    var reg = /^\d+$/;
    var input_str = $('#phonenr').val();
   chopped_str = input_str.substring(0, input_str.length - 1);
   if(!reg.test(input_str)) {
    $("#error").show();
    return;
}
if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
  $("#error").show();
} else {
4

3 に答える 3

1

検証を機能させることができます。

test(Regex Match Test) を使用して、入力テキストで数字のみを受け入れることができます。次のように、JavaScript を使用substringして、入力された数字以外の文字を切り取るだけです。

$(function() {
	$('#btn').on('click',function(e) {
  	var reg = /^\d+$/; // <------ regex for validatin the input should only be digits
    var input_str = $('#phonenr').val();
    chopped_str = input_str.substring(0, input_str.length - 1);
    if(!reg.test(input_str)) {
    	$('label.error').show();
        return;
    }
    if(($.trim(input_str) == '') || ($.trim(input_str).length < 15)) {
      $('label.error').show();
    } else {
      $('label.error').hide();
    }
  });
})
label.error {
  display: none;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="phonenr" type="text" value=""><br>
<label class='error'>Invalid Number</label>
<br><br>
<button id="btn">Click to Validate</button>

お役に立てれば！

于 2016-12-23T15:22:26.843 に答える
1

HTML5 を使用している場合は、新しいnumber入力タイプを利用できます。

<input type="number" name="phone" min="10" max="10">

patternこの属性を使用して、入力を特定の正規表現に制限することもできます。

于 2016-12-23T14:58:28.177 に答える
0

パターンに対して入力をチェックし、有効性に基づいてメッセージを表示する最も簡単な方法を探している場合は、正規表現を使用することをお勧めします。

// Wait until the DOM has been fully parsed
window.addEventListener("DOMContentLoaded", function(){

  // Get DOM references:
  var theForm = document.querySelector("#frmTest");
  var thePhone = document.querySelector("#txtPhone");
  var btnSubmit = document.querySelector("#btnSubmit");
  
  // Hook into desired events. Here, we'll validate as text is inputted
  // into the text field, when the submit button is clicked and when the 
  // form is submitted
  theForm.addEventListener("submit", validate);
  btnSubmit.addEventListener("click", validate);
  thePhone.addEventListener("input", validate);
  
  // The simple validation function
  function validate(evt){
    var errorMessage = "Not a valid phone number!";
    
    // Just check the input against a regular expression
    // This one expects 10 digits in a row.
    // If the pattern is matched the form is allowed to submit,
    // if not, the error message appears and the form doesn't submit.
    !thePhone.value.match(/\d{3}\d{3}\d{4}/) ? 
      thePhone.nextElementSibling.textContent = errorMessage :	thePhone.nextElementSibling.textContent = ""; 
      evt.preventDefault();
  }
 
});
span {
  background: #ff0;
}
<form id="frmTest" action="#" method="post">
  <input id="txtPhone" name="txtPhone"><span></span>
  <br>
  <input type="submit" id="btnSubmit">
</form>

または、プロセスをより細かく制御し、patternHTML5 属性を正規表現で使用してエントリを検証することもできます。長さと数字が同時にチェックされます。

その後、 setCustomValidity()メソッドを使用して、HTML5 Validation API を介して独自のカスタム エラー メッセージを実装できます。

<form id="frmTest" action="#" method="post">
  <input type="tel" id="txtPhone" name="txtPhone" maxlength="20"
         placeholder="555-555-5555" title="555-555-5555"
         pattern="\d{3}-\d{3}-\d{4}" required>
  <input type="submit" id="btnSubmit">
</form>

スタック オーバーフローのコード スニペット環境はフォームではうまく機能しませんが、動作する Fiddle はこちらで確認できます。

于 2016-12-23T15:28:03.370 に答える