使用 angular js 验证电话号码 [英] Validate phone number using angular js

问题描述

想要将电话号码设置为 10 位数字，我该如何使用 Angular js 做到这一点.

这是我尝试过的:

<div class="form-group" ng-class="{'has-error': registration.phone.$error.number}"><label for="inputPhone" class="col-sm-3 control-label">电话:</label><div class="col-sm-9"><输入类型=数字"类=形式控制"ng-minlength="10"ng-maxlength="10"id="输入电话"姓名=电话"占位符=电话"ng-model="user.phone"ng-required="true"><span class="help-block"ng-show="registration.phone.$error.required &&注册.电话.$error.number">需要有效的电话号码</span><span class="help-block"ng-show="((registration.password.$error.minlength ||注册.密码.$error.maxlength) &&registration.phone.$dirty) ">电话号码应为 10 位数字</span>

</表单>

但我没有收到验证错误.

解决方案

试试这个:

<div class="form-group" ng-class="{'has-error': registration.phone.$error.number}"><label for="inputPhone" class="col-sm-3 control-label">电话:</label><div class="col-sm-9"><输入类型=数字"类=形式控制"ng-minlength="10"ng-maxlength="10"id="输入电话"姓名=电话"占位符=电话"ng-model="user.phone"ng-required="true"><span class="help-block"ng-show="registration.phone.$error.required ||注册.电话.$error.number">需要有效的电话号码</span><span class="help-block"ng-show="((registration.phone.$error.minlength ||注册.phone.$error.maxlength) &&registration.phone.$dirty) ">电话号码应为 10 位数字</span>

Want to set phone-number to 10 digits, How can I do this using Angular js.

This is what I have tried:

<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
  <div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
    <label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
    <div class="col-sm-9">
      <input type="number" 
             class="form-control" 
             ng-minlength="10" 
             ng-maxlength="10"  
             id="inputPhone" 
             name="phone" 
             placeholder="Phone" 
             ng-model="user.phone" 
             ng-required="true">
      <span class="help-block" 
            ng-show="registration.phone.$error.required && 
                     registration.phone.$error.number">
                     Valid phone number is required
      </span>
      <span class="help-block" 
            ng-show="((registration.password.$error.minlength || 
                      registration.password.$error.maxlength) && 
                      registration.phone.$dirty) ">
                      phone number should be 10 digits
       </span>
    </div>
  </div>
</form>

But I am not getting the validation error.

解决方案

Try this:

<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
    <div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
        <label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
        <div class="col-sm-9">
            <input type="number" 
                   class="form-control" 
                   ng-minlength="10" 
                   ng-maxlength="10"  
                   id="inputPhone" 
                   name="phone" 
                   placeholder="Phone" 
                   ng-model="user.phone"
                   ng-required="true">
            <span class="help-block" 
                  ng-show="registration.phone.$error.required || 
                           registration.phone.$error.number">
                           Valid phone number is required
            </span>
            <span class="help-block" 
                  ng-show="((registration.phone.$error.minlength ||
                           registration.phone.$error.maxlength) && 
                           registration.phone.$dirty) ">
                           phone number should be 10 digits
            </span>

这篇关于使用 angular js 验证电话号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！