Xác thực số điện thoại bằng cách sử dụng javascript

Question

Tôi đang cố xác thực số điện thoại như 123-345-3456 và (078)789-8908 bằng JavaScript. Đây là mã của tôi

function ValidateUSPhoneNumber(phoneNumber) { 
    var regExp = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}/; 
    var phone = phoneNumber.match(regExp); 
    if (phone) { 
    alert('yes'); 
    return true; 
    } 
    alert('no'); 
    return false; 
} 

Tôi đang thử nghiệm chức năng sử dụng ValidateUSPhoneNumber('123-345-34567') trong đó có 5 chữ số trước dấu nối cuối cùng đó là không hợp lệ theo regex. Nhưng hàm trả về true. Có ai giải thích tại sao không?

Answer 1

hoạt Javascript để xác nhận số điện thoại:

function phonenumber(inputtxt) { 
 
    var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
 
    if(inputtxt.value.match(phoneno)) { 
 
    return true; 
 
    } 
 
    else { 
 
    alert("message"); 
 
    return false; 
 
    } 
 
}

Các kịch bản ở trên phù hợp:

XXX-XXX-XXXX
XXX.XXX.XXXX
XXX XXX XXXX

Nếu bạn muốn sử dụng dấu + trước số theo cách sau
+ XX-XXXX-XXXX
+ XX.XXXX.XXXX
+ XX XXXX XXXX
sử dụng đoạn mã sau:

function phonenumber(inputtxt) { 
    var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/; 
    if(inputtxt.value.match(phoneno)) { 
    return true; 
    } 
    else { 
    alert("message"); 
    return false; 
    } 
} 

Answer 2

Thêm một ranh giới \b lời ở phần cuối của regex:

/^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/ 

nếu không gian sau khi ) là không bắt buộc:

/^(\([0-9]{3}\)\s*|[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/ 

Answer 3

Thêm $ đến hết regex để biểu thị cuối mẫu:

var regExp = /^(\([0-9]{3}\)\s?|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/; 

Answer 4

Biểu thức chính quy này /^(\([0-9]{3}\)\s*|[0-9]{3}\-)[0-9]{3}-[0-9]{4}$/ xác nhận tất cả các nội dung sau:

'123-345-3456'; 
'(078)789-8908'; 
'(078) 789-8908'; // Note the space 

Để phá vỡ những gì đang xảy ra:

1. Các nhóm trong đầu xác nhận hai cách, hoặc là (XXX) hoặc XXX-, với không gian tùy chọn sau đóng ngoặc đơn.
2. Phần sau khi kiểm tra nhóm cho XXX-XXX

Answer 5

Bạn có thể sử dụng plugin jquery:

http://digitalbush.com/projects/masked-input-plugin/

Tham khảo để giới thiệu tab, tùy chọn điện thoại.

Answer 6

Can bất kỳ một giải thích vì sao??

Điều này xảy ra vì cụm từ thông dụng của bạn không kết thúc với bất kỳ ký tự siêu ký tự như cuối dòng $ hoặc ranh giới từ \b.

Vì vậy, khi bạn hỏi động cơ regex liệu 123-345-34567 là số điện thoại hợp lệ nó sẽ cố gắng để tìm một trận đấu trong chuỗi này, vì vậy nó phù hợp với 123- với phần này (\([0-9]{3}\) |[0-9]{3}-) sau đó nó phù hợp với 345- với phần này [0-9]{3}- sau đó nó phù hợp với 3456 với điều này một phần [0-9]{4}.

Bây giờ động cơ phát hiện rằng nó đã đi qua toàn bộ regex và tìm thấy một chuỗi bên trong đầu vào của bạn khớp với regex mặc dù ký tự được để lại - số 7- trong chuỗi đầu vào, vì vậy nó dừng và trả về thành công vì nó tìm thấy một chuỗi con phù hợp.

Nếu bạn đã bao gồm $ hoặc \b vào cuối regex của bạn, động cơ đi theo cùng một cách như trước sau đó nó cố gắng để phù hợp với $ hoặc \b nhưng thấy số cuối cùng - các 7- và nó không phải là một ranh giới từ \b cũng không phải là kết thúc của dòng $ để nó dừng và không tìm thấy kết quả phù hợp.

Answer 7

bất cứ ai có thể giải thích tại sao

vì biểu hiện thường xuyên của bạn không phù hợp với đầu vào. Nó chỉ là đầu vào cũng bao gồm các ký tự phụ. Bạn bao gồm '^' để biểu thị sự bắt đầu của dòng, nhưng (như Andy đã nói) bạn nên bao gồm '$' để biểu thị kết thúc của dòng.

Nếu bạn bắt đầu regex bằng '^' và kết thúc bằng '$', nó sẽ chỉ khớp với các dòng chỉ phù hợp với regex của bạn.

Bằng cách bắt đầu regex bằng '^' và không kết thúc bằng '$', bạn khớp các dòng bắt đầu bằng chuỗi khớp với regex của bạn, nhưng các dòng có thể có bất kỳ thứ gì khác theo thứ tự phù hợp.

Answer 8

^(\(?[0-9]{3}\)?)((\s|\-){1})?[0-9]{3}((\s|\-){1})?[0-9]{4}$

Giả sử bạn đang xác nhận số điện thoại Mỹ, điều này sẽ làm các trick.

Thứ nhất, chúng tôi cho phép 0 hoặc 1 ngoặc mở để bắt đầu \(?

Sau đó, chúng tôi cho phép 3 chữ số liên tiếp giữa 0-9 [0-9]{3}

Sau đó, chúng ta lặp lại các bước đầu tiên và cho phép ngoặc 0 hoặc 1 bế mạc \)?

Đối với nhóm thứ hai, chúng ta bắt đầu bằng cách cho phép một không gian hoặc một gạch nối 0 hoặc 1 lần ((\s|\-){1})?

này được lặp lại betw een nhóm thứ hai và thứ ba của các số, và chúng tôi kiểm tra 3 chữ số liên tiếp sau đó bốn chữ số liên tiếp để kết thúc nó. Đối với số điện thoại của Mỹ, tôi nghĩ rằng điều này bao gồm các căn cứ cho nhiều cách khác nhau mà mọi người có thể định dạng số, nhưng đủ hạn chế để họ không thể vượt qua một chuỗi không hợp lý.

Answer 9

Đây là cách dễ nhất mà tôi đã tìm thấy để sử dụng javascript regex để kiểm tra định dạng số điện thoại.ví dụ cụ thể này kiểm tra nếu nó là một số có 10 chữ số.

<input name="phone" pattern="^\d{10}$" type="text" size="50"> 

Trường nhập được gắn cờ khi nút gửi được nhấp nếu mẫu không khớp với giá trị, không yêu cầu css hoặc js khác.

Answer 10

function validatePhone(inputtxt) { 
 
    var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
 
    return phoneno.test(inputtxt) 
 
}

Answer 11

Nếu bạn sử dụng trên thẻ đầu vào so với mã này sẽ giúp bạn. Tôi tự viết mã này và tôi nghĩ đây là cách rất tốt để sử dụng trong đầu vào. nhưng bạn có thể thay đổi nó bằng cách sử dụng định dạng của bạn. Nó sẽ giúp người dùng chỉnh sửa định dạng của họ trên thẻ đầu vào.

$("#phone").on('input', function() { //this is use for every time input change. 
     var inputValue = getInputValue(); //get value from input and make it usefull number 
     var length = inputValue.length; //get lenth of input 

     if (inputValue < 1000) 
     { 
      inputValue = '1('+inputValue; 
     }else if (inputValue < 1000000) 
     { 
      inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, length); 
     }else if (inputValue < 10000000000) 
     { 
      inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, length); 
     }else 
     { 
      inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, 10); 
     }  
     $("#phone").val(inputValue); //correct value entered to your input. 
     inputValue = getInputValue();//get value again, becuase it changed, this one using for changing color of input border 
     if ((inputValue > 2000000000) && (inputValue < 9999999999)) 
     { 
      $("#phone").css("border","black solid 1px");//if it is valid phone number than border will be black. 
     }else 
     { 
      $("#phone").css("border","red solid 1px");//if it is invalid phone number than border will be red. 
     } 
    }); 

    function getInputValue() { 
     var inputValue = $("#phone").val().replace(/\D/g,''); //remove all non numeric character 
     if (inputValue.charAt(0) == 1) // if first character is 1 than remove it. 
     { 
      var inputValue = inputValue.substring(1, inputValue.length); 
     } 
     return inputValue; 
}