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

这是一个非常好的Angular Form验证示例，其中还包含电子邮件验证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>

Answer 2

有关电话号码验证，请参阅此帖子

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>

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

2 个答案: