AngularJS 表单验证手机号的实例(非必填)
代码如下所示:
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>电话:<br> <input type="text" name="phone" ng-model="phone" ng-pattern="/(^$)|^(((\+86)|(86))?1[34578]\d{9})$/"> <span style="color:red" ng-show="myForm.phone.$dirty && myForm.phone.$invalid"> 联系电话格式不正确!</span> </p> <p> <input type="submit" ng-disabled="myForm.$invalid"> </p> </form>
正则表达式:
1. 匹配空:^$
2. 匹配手机号:^(((\+86)|(86))?1[34578]\d{9})$
3. 控制提示信息的显示:ng-show="myForm.phone.$dirty && myForm.phone.$invalid"
以上这篇AngularJS 表单验证手机号的实例(非必填)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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:</labe
-
AngularJS 表单验证手机号的实例(非必填)
代码如下所示: <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>电话:<br> <input type="text" name="phone" ng-model="phone" ng-pattern="/(^$)|^(((\+8
-
AngularJs表单验证实例代码解析
常用的表单验证指令如下详情: 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.
-
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi
-
AngularJS表单验证功能分析
本文实例讲述了AngularJS表单验证功能.分享给大家供大家参考,具体如下: 在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例.在表单里面的每个input都会创建一个在这个实例下的ngModelController实例,用以控制每个input的行为. 首先先从简单的验证开始. AngularJs的ngModelController提供了几种属性:$pristine;$dirty;$valid;$invalid;$error pristine:
-
validationEngine 表单验证插件使用实例代码
先给大家展示下效果图,如果大家感觉不错,请参考实现代码: 废话少说,直接上代码,可拷贝直接运行: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
AngularJs表单验证实例详解
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="
-
AngularJS表单验证功能
能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏.我们要在Web前端尽力保护后端. AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便.AngularJS提供了很多表单验证指令. <form name="form" novalidate> <label na
-
JS实现的简单表单验证功能完整实例
本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
-
JS实现的通用表单验证插件完整实例
本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
php封装的表单验证类完整实例
本文实例讲述了php封装的表单验证类.分享给大家供大家参考,具体如下: <?php //封装一个表单验证类 //中文验证.邮箱验证.电话号码.手机.QQ.身份证.(由字母.数字.下划线组成,不能以数字开头) header('content-type:text/html;charset=utf-8'); class Form{ /* //中文验证的方法 //参数:$str,$num1,$num2 //返回值:匹配成功返回匹配的次数 */ public function checkChina($st
随机推荐
- 浅谈mint-ui 填坑之路
- 基于jquery的动态创建表格的插件
- 历代木马程序隐身的技术分析第1/2页
- Mybatis调用Oracle存储过程的方法图文详解
- PHP 定界符 使用技巧
- JavaScript使用push方法添加一个元素到数组末尾用法实例
- js 处理URL实用技巧
- 指定js可访问其它域名的cookie的方法
- php调用mysql存储过程
- 基于JQuery+PHP编写砸金蛋中奖程序
- JSP实现登录功能之添加验证码
- mysql慢查询使用详解
- centos7 用rpm安装mysql详解
- C++中string与int的相互转换实现代码
- javascript 学习之旅 (3)
- 解析window.open的使用方法总结
- 让 EditPlus 轻松拥有压缩代码和格式化代码功能
- IIS 服务器 防范攻击3条安全设置技巧
- Android编程实现的一键锁屏程序详解
- 详解Java无需解压直接读取Zip文件和文件内容