2016-07-30 2 views
3

を使用してテキストエリア内の重複&有効な番号のチェック。は、私はすべての10桁の新しい行が発生した後、私が確認するためにこのコードを使用し行</p> <p>によって 10桁の携帯電話番号の行が含まれているテキストエリアにjQueryの検証を開発していますjQueryの

$('#mobile_numbers').keyup(function() { 

     if (/\D/g.test(this.value)) 
     { 
      this.value = this.value.replace(/\D/g, ''); 
     } 

     this.value = this.value 
      .replace(/[\n\r]+/g, "") 
      .replace(/(.{10})/g, "$1\n"); 
    }); 

上記のコードは、数値だけを入力するよう強制され、10桁ごとに改行が追加されます。

すべてが正常に動作しているが、私は、私は携帯電話番号をチェックしようとしている

1)という状況でこだわっているそのための条件は、それが7または8から開始する必要がある 有効であるかどうか9行に10桁の数字が含まれています。それ以外の場合は削除します。

2)また、私はjqueryのを使用して、私は私がしようとしている事を知らない

Eg: (User type in text area) 
7777777777 
8888888888 
9999999999 
7777777776 
6601145591 // Invalid (should start with 7/8/9 & 10 digit) 
5566887744 //Invalid 
664433  //Invalid 
8888888886 
9999999996 
9999999996 
8888888886 

Output: 
<h1>Total number: 11<h1> 
<h1>Duplicate number: 2<h1> 
<h1>Valid number: 6<h1> 

としてHTMLで出力を示すテキストエリアにデータ間の重複数&有効数をカウントしようとしています可能であるかどうか。 できるだけこれを行う方法 私はドキュメントのリンクを取得することができますそれを自分で行います。 しかし、私はこれをコード化することを恐れています。私はバックエンドの開発者です。私はPHPですべてをチェックしていますが、私はクライアント側でもjQueryを使って検証を行いたいと思っています。

ありがとうございます。ここで

+1

が必要なテキストエリアの使用ですか?そうでなければ、これははるかに簡単に行うことができます。 –

答えて

2

は、あなたがそれを達成することができる方法です。

 $('#mobile_numbers').keyup(function() { 
      if (/\D/g.test(this.value)) { 
       this.value = this.value.replace(/\D/g, ''); 
      } 
      this.value = this.value 
        .replace(/[\n\r]+/g, "") 
        .replace(/(.{10})/g, "$1\n"); 
      validateNumbers(); 
     }); 
     function validateNumbers() { 
      var value = $("#mobile_numbers").val(); 
      var numbersArray = value.split('\n'); 
      var validNumbers = []; 
      var duplicateNumbers = []; 
      var inValidNumbers = []; 

      // remove empty elements 
      var index = numbersArray.indexOf(""); 
      while(index !== -1) 
      { 
       numbersArray.splice(index,1); 
       index = numbersArray.indexOf(""); 
      } 

      for (var $i = 0; $i < numbersArray.length; $i++) { 
       var number = numbersArray[$i]; 
       if (validNumbers.indexOf(number) !== -1 || inValidNumbers.indexOf(number) !== -1) { 
        duplicateNumbers.push(number); 
       } else if (number.match(/[789]\d{9}/)) { 
        validNumbers.push(number); 
       } else { 
        inValidNumbers.push(number); 
       } 
      } 
      $("#total").text(numbersArray.length); 
      $("#duplicate").text(duplicateNumbers.length); 
      $("#valid").text(validNumbers.length); 
      $("#invalid").text(inValidNumbers.length); 
     } 

全作業のデモ: https://plnkr.co/edit/u4hN9QGqOZJ4Sx6F7K90?p=preview

+1

ありがとうございました:)しかし、それはまた、総数として新しい行のカーソルを数えています。 –

+2

はい。テキストエリアの最後の文字が\ nの場合、 'numbersArray'の最後の要素は空の文字列になりますが、もちろん要素としてカウントされます。ループ内で 'splice'を使って空の値をチェックしたり、削除したりすることができます:' if(!number.length){numbersArray.splice($ i、1)} ' – Naveed

+0

無効な数字にも同じ問題があります。 –

0

は、Google libphonenumberが最善の解決策であるように、電話番号と仕事をしたい場合。 JavaScriptとJavaをサポートしています。ここにはJavaScript DEMOがあります。

図書館リンク:https://github.com/googlei18n/libphonenumber

コード例:

var phoneUtil = i18n.phonenumbers.PhoneNumberUtil.getInstance(); 
var number = phoneUtil.parseAndKeepRawInput(phoneNumber, "US"); 
var isValidNumber = phoneUtil.isValidNumber(number); 
if (isValidNumber) { 
    var formattedNumber = phoneUtil.format(number, 18n.phonenumbers.PhoneNumberFormat.E164); 
    return formattedNumber; 
} 
関連する問題