角JS验证的电子邮件和电话号码

Question

谁能帮我验证了电话号码和电子邮件

<div class="form-group" ng-if="notificationMethod == 'call' || notificationMethod == 'text'" > 
                <label for="phoneNumber">Phone Number</label> 
                <input type="phoneNumber" class="form-control" id="phoneNumber" placeholder="Enter Phone Number" ng-model="phoneNumberToBeNotified" ng-minlength="10" ng-maxlength="10" ng-pattern="^\d{4}-\d{3}-\d{4}$" required/> 
                <!-- <span class="error" style="color:#ff0000;" ng-show="myForm.phoneNumber.$error.required"> This field is required </span> 
                <span class="error" style="color:#ff0000;" ng-show="myForm.phoneNumber.$error.minlength"> Mobile number should be of 10 digits </span><br> 
                <span class="error" style="color:#ff0000;" ng-show="myForm.phoneNumber.$error.minlength"> Mobile number should be of 10 digits </span> --> 
               </div> 
               <div class="form-group" ng-if="notificationMethod == 'email'"> 
                <label for="email">E-Mail</label> 
                <input type="email" class="form-control" name="email" placeholder="Enter Email" ng-model="emailToBeNotified" required/> 
                <span ng-show="myForm.email.$error.required"> This field is required </span> 
                <span ng-show="myForm.email.$error.email"> Not a valid email </span> 
               </div> 

Answer 1

的电话号码验证，请参阅这篇

Validate phone number using angular js

<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> 

OR

添加您的验证模式（ph_numbr）

<form class="form-horizontal" role="form" method="post" name="registration" novalidate> 
    <div class="form-group" ng-class="{ 'has-error' : (registration.phone.$invalid || registration.phone.$pristine)}"> 
    <label for="inputPhone" class="col-sm-3 control-label">Phone :</label> 
    <div class="col-sm-9"> 
     <input type="number" class="form-control" ng-pattern="ph_numbr" id="inputPhone" name="phone" placeholder="Phone" ng-model="user.phone" ng-required="true"> 
     <div class="help-block" ng-messages="registration.phone.$error"> 
     <p ng-message="required">Phone number is required.</p> 
     <p ng-message="pattern">Phone number is invalid.</p> 
     </div> 
    </div> 
    </div> 
</form> 

Answer 2

这是一个非常好的角度表单验证实例也包含电子邮件验证http://plnkr.co/edit/lCRwhj?p=preview

<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"> 
     <label>Email</label> 
     <input type="email" name="email" class="form-control" ng-model="user.email"> 
     <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> 
    </div>