angularjs 手机验证怎么写

发布网友 发布时间：2022-04-23 02:03

我来回答

共2个回答

热心网友 时间：2022-04-20 11:41

如果用angularJS自带的验证，就必须包括在form 标签里 否则验证无法生效

热心网友 时间：2022-04-20 12:59

第一种方法：

<div class="form-group">
<label for="email" class="col-sm-4 control-label">电话：</label>
<div class="col-sm-4">
<input class="form-control" id="tel" placeholder="请输入电话" type="tel" name="tel"
ng-model="userdata.tel" ng-minlength="11" ng-maxlength="11" ng-pattern="/^1[3|5][0-9]\d{4,8}$/"required>
</div>
<div class="col-sm-4">
<p class="glyphicon glyphicon-ok input_result text-success"
ng-if="signUpForm.tel.$valid"></p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="signUpForm.tel.$error.required&&signUpForm.tel.$touched">电话不能为空！</p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="(signUpForm.tel.$error.minlength||signUpForm.tel.$error.maxlength)&&signUpForm.tel.$touched">请输入有效手机号!</p> <!--$touched失去焦点再做判断-->
</div>
</div>
第二种方法：
<div class="form-group">
<label for="email" class="col-sm-4 control-label">电话：</label>
<div class="col-sm-4">
<input class="form-control" id="tel" placeholder="请输入电话" type="tel" name="tel"
ng-model="userdata.tel" ng-minlength="11" ng-maxlength="11" ng-pattern="/^1[3|5][0-9]\d{4,8}$/"required>
</div>
<div class="col-sm-4">
<p class="glyphicon glyphicon-ok input_result text-success"
ng-if="signUpForm.tel.$valid&&signUpForm.tel.$error.pattern"></p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="signUpForm.tel.$error.required&&signUpForm.tel.$touched">电话不能为空！</p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="(signUpForm.tel.$error.minlength||signUpForm.tel.$error.maxlength)&&signUpForm.tel.$error.pattern&&signUpForm.tel.$touched">请输入有效手机号!</p>
<!--$touched失去焦点再做判断-->
</div>
</div>
第三种完全正确：（推荐）
<div class="form-group">
<label for="email" class="col-sm-4 control-label">电话：</label>
<div class="col-sm-4">
<input class="form-control" id="tel" placeholder="请输入电话" type="tel" name="tel"
ng-model="userdata.tel" ng-minlength="11" ng-maxlength="11" ng-pattern="/^1[3|5][0-9]\d{4,8}$/"required>
</div>
<div class="col-sm-4">
<p class="glyphicon glyphicon-ok input_result text-success"
ng-if="signUpForm.tel.$valid"></p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="signUpForm.tel.$error.required&&signUpForm.tel.$touched">电话不能为空！</p>
<p class="text-danger glyphicon glyphicon-remove"
ng-if="(signUpForm.tel.$error.minlength||signUpForm.tel.$error.maxlength||signUpForm.tel.$error.pattern)&&signUpForm.tel.$touched">请输入有效手机号!</p>
<!--$touched失去焦点再做判断-->
</div>
</div>