電話號碼驗證Angularjs

Question

我在驗證電話號碼時遇到問題。電話號碼是應該在三個輸入字段 第一個輸入字段中填入一個10位數的字串 - 僅只有3位（需要，只能接受數字和最大長度3） 第二輸入字段 - 只只有3個數字（要求，只能接受數字和最大長度3） 第3個輸入字段 - 只有4位數字（要求，只能接受數字和最大長度爲4）

和選項卡應移動到下一個輸入字段，的字符在第一個 得到執行時，沒有上述條件不能滿足

<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label> 
         <label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label> 
         <label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label> 
         <div class="clearfix" ></div> 

領域應該是紅色，

我將如何實現使用輸入HTML標籤

Answer 1

您應該使用輸入模式驗證上述驗證條件。這可以使用ng-pattern指令完成：

如果ngModel值與通過評估屬性值中給出的角度表達式找到的RegExp不匹配，NgPattern會設置模式驗證錯誤密鑰。如果表達式計算爲RegExp對象，則直接使用該表達式。如果表達式求值爲一個字符串，那麼它將在包含^和$字符後轉換爲RegExp。例如，「abc」將被轉換爲新的RegExp（'^ abc $'）。

注意事項：避免使用於RegExp g標誌，因爲它會導致每個連續的搜索上次搜索的匹配的索引處開始，因此不會考慮整個輸入值考慮在內。

Answer 2

有幾個與你的代碼的小問題。具體而言，我正在尋找ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"。您可以使用輸入上的min和max的html5屬性來實現您的號碼驗證。所以，你的投入會是這個樣子：

<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" /> 

然後你就可以針對使用這樣的運行驗證：

<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty"> 
    <div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div> 
</div> 

當然交換了phoneForm爲您的表單的名稱。