htmlパターンを使用してオーストラリアの電話番号を検証する方法

Question

PHPでは、PHP Regexを使用して入力からオーストラリアの電話番号を簡単に検証できます。

私が使用している正規表現は次のとおりです。

/^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{2}(\ |-){0,1}[0-9]{1}(\ |-){0,1}[0-9]{3}$/ 

オーストラリアの数字

// Valid 
    var phoneNumber1 = "0411 234 567"; 
    var phoneNumber2 = "(02) 3892 1111"; 
    var phoneNumber3 = "38921111"; 
    var phoneNumber4 = "0411234567"; 

    // Invalid 
    var phoneNumber5 = "3892 11"; 
    var phoneNumber6 = "diane 0411 234 567"; 
    var phoneNumber7 = "bob"; 

私はHTML5パターンの属性を使用して、クライアント側で有効に同じ正規表現を使用しようとしたが、私はありません希望の結果を得る。

HTML5で使用しているときに、上記の正規表現に何が間違っているかを知る手助けができますか？誰もがHTML5フォームの検証を模倣したjavascriptソリューションを提案できれば、本当にありがたく思う。

Answer 1

これはスペースを逃しただけなので、必要ない。スペースをエスケープすることがなぜ問題なのかよく分かりません。しかし、とにかく、これは動作するようです。

あなたが作成したデータリストに無効なものが含まれていても、ドロップダウンには表示されません。

<form onsubmit="alert('ok'); return false;"> 
 

 
<input type="text" list="test" 
 
pattern="^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}(|-){0,1}[0-9]{2}(|-){0,1}[0-9]{2}(|-){0,1}[0-9]{1}(|-){0,1}[0-9]{3}$"> 
 

 
<datalist id="test"> 
 
    <option value="0411 234 567"> 
 
    <option value="(02) 3892 1111"> 
 
    <option value="38921111"> 
 
    <option value="0411234567"> 
 
    <option value="3892 11"> 
 
    <option value="diane 0411 234 567"> 
 
    <option value="bob"> 
 
</datalist> 
 

 
<button type="submit">Test</button> 
 

 
</form>