AngularJSでの電話番号の検証

debugcn 投稿 Dev

じゃでんくん

入力が次のパターンに一致するように、テキストフィールドの電話番号を検証しようとしています：05x-xxxxxxx（ハイフンは無視されます）。これは正しい方法ですか？

HTML：

<form name="PhoneForm">
    <div>
        <md-icon md-svg-src="icons/ic_phone_48px.svg"></md-icon>
        <md-input-container>
            <label>Phone Number</label>
            <input ng-model="contactPhone" name="PhoneInput" required ng-pattern="[0][5][0-9]{8}"/> <!-- i.e 05x-xxxxxxx -->
            <div ng-messages="PhoneForm.PhoneInput.$error" ng-if="PhoneForm.PhoneInput.$dirty">
                <div ng-message="required">This field is required!</div>
                <div ng-message="pattern">Illegal phone number!</div>
            </div>
        </md-input-container>
    </div>
</form>

これはうまくいかないようです。入力が空の場合、「フィールドが必要です」というメッセージも表示されません。パターンに何か問題がありますか？

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

ネイサンベック

正規表現の問題のようです。正規表現の開始/終了式（^および$）を入力し、式を/。でラップすることをお勧めします。次のプランカー/^[0][5][0-9]{8}$/は、で意図したとおりに機能しますng-pattern。

Plunkは、ドキュメントhttps://docs.angularjs.org/api/ng/directive/ngPatternにあるものに基づいています

https://embed.plnkr.co/BsJXjqIE1TwzT7OPFvNA/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]