web-dev-qa-db-ja.com

JavaScriptを使用して電話番号を検証する

いくつかのフィールドと送信ボタンを備えたWebフォームで作業しています。ボタンがクリックされたら、必要なテキストボックスが入力されていること、および電話番号が正しい形式であることを確認する必要があります。 7桁または10桁の電話番号しか受け入れられませんが、（、）、（-）などの文字は受け入れられます。このボックスが空の場合、または電話番号が正しい形式（7または10の長さではなく、数字ではない）であるか、空白のままになっている場合、テキストボックスの周囲に赤い境界線を追加する必要があります。この境界線は、ユーザーがエラーを修正するまで所定の位置にとどまることになっています。

これを正しく動作させることはできません。私はこれを行うためにいくつかの異なる方法を試しましたが、いくつかの異なるタイプのエラーが発生しました。 1つの方法は機能しているように見えましたが、赤い境界線は1秒間しか表示されず、その後消えて、テキストボックスの値がリセットされました。

コードと、作成したjsfiddleへのリンクを次に示します。

Javascript：

<script type="text/javascript">
    function validateForm() {
        return checkPhone();
    }
    function checkPhone() {
        var phone = document.forms["myForm"]["phone"].value;
        var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
            if(phone.value.match(phoneNum)) {
                return true;
            }
            else {
                document.getElementById("phone").className = document.getElementById("phone").className + " error";
                return false;
            }
        }
</script>

HTML：

<form name="myForm" onsubmit = "return validateForm()">
    Phone Number: <input type="text" id="phone"><br>
</form>

JSFiddle：

http://jsfiddle.net/mkdsjc0p/

javascripthtmlvalidationphone-number
5
Beth Tanner

あなたの正規表現については、

^\+{0,2}([\-\. ])?(\(?\d{0,3}\))?([\-\. ])?\(?\d{0,3}\)?([\-\. ])?\d{3}([\-\. ])?\d{4}

しかし、一般的には++ 44 20 1234 56789または+44（0）1234 567890のようなものを入力する可能性があるため、推定は正しくありません。

var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {  return true;  }

これにより、入力された値に7〜10桁の数字が含まれますが、フォーマットは何になります。ただし、上記のサンプルのように、numberの最大長は10を超える可能性があることを考慮する必要があります。

12
i100
function telephoneCheck(str) {
  var a = /^(1\s|1|)?((\(\d{3}\))|\d{3})(\-|\s)?(\d{3})(\-|\s)?(\d{4})$/.test(str);
  alert(a);
}
telephoneCheck("(555) 555-5555");

strがこれらの形式のいずれかである場合：555-555-5555 (555)555-5555（555）555-5555 555 555 5555 5555555555 1 555 555 5555

5
Frawel

これを試してみてください.

<form>
<input type="text" name="mobile" pattern="[1-9]{1}[0-9]{9}" title="Enter 10 digit mobile number" placeholder="Mobile number" required>
<button>
Save
</button>
</form>

https://jsfiddle.net/guljarpd/12b7v330/

3
Guljar Prasad
<html>
<title>Practice Session</title>
<body>           
<form name="RegForm" onsubmit="return validate()" method="post">  
<p>Name: <input type="text" name="Name"> </p><br>        
<p>Contact: <input type="text" name="Telephone"> </p><br>   
<p><input type="submit" value="send" name="Submit"></p>          
</form> 
</body>
<script> 
function validate()                                    
{ 
var name = document.forms["RegForm"]["Name"];                
var phone = document.forms["RegForm"]["Telephone"];  
if (name.value == "")                                  
{ 
window.alert("Please enter your name."); 
name.focus();
return false;
}
else if(isNaN(name.value) /*"%d[10]"*/)
{
alert("name confirmed");
}
else{ 
window.alert("please enter character"); 
}   
if (phone.value == "")                           
{ 
window.alert("Please enter your telephone number."); 
phone.focus();
return false; 
} 
else if(!isNaN(phone.value) /*phone.value == isNaN(phone.value)*/)
{
alert("number confirmed");
}
else{
window.alert("please enter numbers only");
}   
}
</script> 
</html>
1
Sachin Gupta
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Homepage-30-06-2016/Css.css" >
<title>Form</title>

<script type="text/javascript">

        function isChar(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 47 && charCode < 58) {

                document.getElementById("error").innerHTML = "*Please Enter Your Name Only";
                document.getElementById("fullname").focus();
                document.getElementById("fullname").style.borderColor = 'red';
                return false;
            }
            else {
                document.getElementById("error").innerHTML = "";
                document.getElementById("fullname").style.borderColor = '';

                return true;
            }
        }
</script>
</head>

<body>

        <h1 style="margin-left:20px;"Registration Form>Registration Form</h1><hr/>

           Name: <input id="fullname" type="text" placeholder="Full Name*"
                 name="fullname" onKeyPress="return isChar(event)" onChange="return isChar(event);"/><label id="error"></label><br /><br />

<button type="submit" id="submit" name="submit" onClick="return valid(event)" class="btn btn-link text-uppercase"> Submit now</button>
0
vishwanath

エッジケースが多すぎるように思われるため、簡単なチェックを行いました。

^(([0-9\ \+\_\-\,\.\^\*\?\$\^\#\(\)])|(ext|x)){1,20}$

最初に指摘することは、「ext」の繰り返しを許可することですが、この正規表現の目的は、ユーザーが誤って電話番号の代わりに電子メールIDなどを入力するのを防ぐことです。

0
Sahil Ahuja

次のサイトを参照して、電話番号の検証について知ることができます

https://www.w3resource.com/javascript/form/non-empty-field.php
0
Codemaker