AngularJs 最新验证手机号码的实例,成功测试通过

 更新时间:2017年11月26日 12:35:36   作者:峰雨同行  
下面小编就为大家分享一篇AngularJs 最新验证手机号码的实例,成功测试通过,具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧

实例如下:

<form name="signUpForm" novalidate>

  <div class="form-group">
  <div class="row clearfix">
   <label for="tel1" class="col-xs-12" style="text-align: left">L张蒙号码1:</label>
   <div style="text-align: center" class="col-xs-12">
    <input id="tel1" type="tel" name="tel1"
        data-ng-model="vm.tel1"
        ng-minlength="11"
        ng-pattern="/^1[3|5][0-9]\d{4,8}$/" required
        style="width: 80%;font-size: large"
        placeholder="请输入号码1:"/>
   </div>
   <div class="col-xs-12">
    <p class="glyphicon glyphicon-ok input_result text-success"
      ng-if="signUpForm.tel1.$valid"></p>
    <p class="text-danger glyphicon glyphicon-remove"
      ng-if="signUpForm.tel1.$error.required&&signUpForm.tel1.$touched">电话不能为空!</p>
    <p class="text-danger glyphicon glyphicon-remove"
      ng-if="(signUpForm.tel1.$error.minlength||signUpForm.tel1.$error.maxlength||signUpForm.tel1.$error.pattern)&&signUpForm.tel1.$touched">请输入有效手机号!</p>
   </div>
  </div>
</form>

以上这篇AngularJs 最新验证手机号码的实例,成功测试通过就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Angular应用Bootstrap过程步骤逻辑详解

    Angular应用Bootstrap过程步骤逻辑详解

    这篇文章主要为大家介绍了Angular应用Bootstrap过程步骤逻辑详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Angular使用Restful的增删改

    Angular使用Restful的增删改

    今天小编就为大家分享一篇关于Angular使用Restful的增删改,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    这篇文章主要介绍了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法,结合实例形式分析了ng-app自动加载我们自定义的模块作为根模块的操作步骤与实现技巧,需要的朋友可以参考下
    2017-01-01
  • 详解angular2 控制视图的封装模式

    详解angular2 控制视图的封装模式

    这篇文章主要介绍了详解angular2 控制视图的封装模式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • AngularJS入门教程之Helloworld示例

    AngularJS入门教程之Helloworld示例

    这篇文章主要介绍了AngularJS入门教程之Helloworld示例,结合Helloworld入门示例分析了AngularJS的功能、原理、MVC框架、数据绑定与相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • Angular8引入百度Echarts进行图表分析的实现代码

    Angular8引入百度Echarts进行图表分析的实现代码

    这篇文章主要介绍了Angular8引入百度Echarts进行图表分析的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Angularjs 根据一个select的值去设置另一个select的值方法

    Angularjs 根据一个select的值去设置另一个select的值方法

    今天小编就为大家分享一篇Angularjs 根据一个select的值去设置另一个select的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 详解angularjs中如何实现控制器和指令之间交互

    详解angularjs中如何实现控制器和指令之间交互

    本篇文章主要介绍了详解angularjs中如何实现控制器和指令之间交互,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 详解为Angular.js内置$http服务添加拦截器的方法

    详解为Angular.js内置$http服务添加拦截器的方法

    所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器,每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。
    2016-12-12
  • Angular 5.0 来了! 有这些大变化

    Angular 5.0 来了! 有这些大变化

    Angular 5.0 来了! 有这些重大变化,这篇文章就为大家介绍了Angular 5.0大变化,感兴趣的小伙伴们可以参考一下
    2017-11-11

最新评论