【前端学习-25】【day04】正则表达式、表单验证、用户名验证

【day04正则表达式】

一、正则表达式
1.1 什么是正则表达式
1.2 正则表达式的特点
二、正则表达式在js中的应用
2.1 创建正则表达式（两种方式）
三、正则表达式的特殊字符
3.1 边界符
3.2 字符类
3.3 常用正则表达式
3.4 量词符
3.5 括号总结
3.6 预定义类
四、正则表达式中的替换
4.1 replace替换
案例1：用户名验证
案例2：表单验证

一、正则表达式

1.1 什么是正则表达式

1.2 正则表达式的特点

二、正则表达式在js中的应用

2.1 创建正则表达式（两种方式）

代码演示：

 <script>// 正则表达式在js中的使用// 1. 利用 RegExp对象来创建 正则表达式var regexp = new RegExp(/123/);console.log(regexp);// 2. 利用字面量创建 正则表达式var rg = /123/;// 3.test 方法用来检测字符串是否符合正则表达式要求的规范console.log(rg.test(123));console.log(rg.test('abc'));</script>

三、正则表达式的特殊字符

3.1 边界符

代码演示：

<script>// 边界符 ^ $ var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型// /abc/ 只要包含有abc这个字符串返回的都是trueconsole.log(rg.test('abc'));console.log(rg.test('abcd'));console.log(rg.test('aabcd'));console.log('---------------------------');var reg = /^abc/;console.log(reg.test('abc')); // trueconsole.log(reg.test('abcd')); // trueconsole.log(reg.test('aabcd')); // falseconsole.log('---------------------------');var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范console.log(reg1.test('abc')); // trueconsole.log(reg1.test('abcd')); // falseconsole.log(reg1.test('aabcd')); // falseconsole.log(reg1.test('abcabc')); // false</script>

3.2 字符类

字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了

 <script>//var rg = /abc/;  只要包含abc就可以 // 字符类: [] 表示有一系列字符可供选择，只要匹配其中一个就可以了var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为trueconsole.log(rg.test('andy'));console.log(rg.test('baby'));console.log(rg.test('color'));console.log(rg.test('red'));var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 trueconsole.log(rg1.test('aa'));console.log(rg1.test('a'));console.log(rg1.test('b'));console.log(rg1.test('c'));console.log(rg1.test('abc'));console.log('------------------');var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  console.log(reg.test('a'));console.log(reg.test('z'));console.log(reg.test(1));console.log(reg.test('A'));// 字符组合var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  console.log(reg1.test('a'));console.log(reg1.test('B'));console.log(reg1.test(8));console.log(reg1.test('-'));console.log(reg1.test('_'));console.log(reg1.test('!'));console.log('----------------');// 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆var reg2 = /^[^a-zA-Z0-9_-]$/;console.log(reg2.test('a'));console.log(reg2.test('B'));console.log(reg2.test(8));console.log(reg2.test('-'));console.log(reg2.test('_'));console.log(reg2.test('!'));</script>

3.3 常用正则表达式

3.4 量词符

代码演示：

 <script>// 量词符: 用来设定某个模式出现的次数// var reg = /^a$/;// console.log(reg.test('a'));// console.log(reg.test('aa'));// 1. * 相当于 >= 0 可以出现0次或者很多次 // var reg = /^a*$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// 2. + 相当于 >= 1 可以出现1次或者很多次// var reg = /^a+$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// 3. ?  相当于 1 || 0// var reg = /^a?$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// 4. {3 } 就是重复3次// var reg = /^a{3}$/;// console.log(reg.test(''));// console.log(reg.test('a'));// console.log(reg.test('aa'));// console.log(reg.test('aaaaaa'));// console.log(reg.test('aaa'));// 5. {3, }  大于等于3var reg = /^a{3,}$/;console.log(reg.test(''));console.log(reg.test('a'));console.log(reg.test('aa'));console.log(reg.test('aaaaaa'));console.log(reg.test('aaa'));// 6. {3, 16}  大于等于3 并且 小于等于16var reg = /^a{3,16}$/;console.log(reg.test(''));console.log(reg.test('a'));console.log(reg.test('aa'));console.log(reg.test('aaaaaa'));console.log(reg.test('aaa'));console.log(reg.test('aaaaaaaaaaaaaaaaaaaaa'));</script>

3.5 括号总结

代码演示：

<script>// 中括号 字符集合.匹配方括号中的任意字符. // var reg = /^[abc]$/;// a 也可以 b 也可以 c 可以  a ||b || c// 大括号  量词符. 里面表示重复次数// var reg = /^abc{3}$/; // 它只是让c重复三次   abccc// console.log(reg.test('abc'));// console.log(reg.test('abcabcabc'));// console.log(reg.test('abccc'));// 小括号 表示优先级var reg = /^(abc){3}$/; // 它是让abcc重复三次console.log(reg.test('abc'));console.log(reg.test('abcabcabc'));console.log(reg.test('abccc'));</script>

3.6 预定义类

代码演示：

 <script>// 座机号码验证:  全国座机号码  两种格式:   010-12345678  或者  0530-1234567// 正则里面的或者 符号  |  // var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;var reg = /^\d{3,4}-\d{7,8}$/;
</script>

四、正则表达式中的替换

4.1 replace替换

代码演示：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>textarea {width: 300px;height: 100px;border: 1px solid #ccc;}</style>
</head><body><textarea name="" id="message"></textarea> <button>提交</button><div></div><script>// 替换 replace// var str = 'andy和red';// // var newStr = str.replace('andy', 'baby');// var newStr = str.replace(/andy/, 'baby');// console.log(newStr);var text = document.querySelector('textarea');var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function() {div.innerHTML = text.value.replace(/激情|gay/g, '**');}</script>
</body>

案例1：用户名验证

代码演示：

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>span {color: #aaa;font-size: 14px;}.right {color: green;}.wrong {color: red;}</style>
</head><body><input type="text" class="uname"> <span>请输入用户名</span><script>//  量词是设定某个模式出现的次数var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1// {6,16}  中间不要有空格// console.log(reg.test('a'));// console.log(reg.test('8'));// console.log(reg.test('18'));// console.log(reg.test('aa'));// console.log('-------------');// console.log(reg.test('andy-red'));// console.log(reg.test('andy_red'));// console.log(reg.test('andy007'));// console.log(reg.test('andy!007'));var uname = document.querySelector('.uname');var span = document.querySelector('span');uname.onblur = function() {if (reg.test(this.value)) {console.log('正确的');span.className = 'right';span.innerHTML = '用户名格式输入正确';} else {console.log('错误的');span.className = 'wrong';span.innerHTML = '用户名格式输入不正确';}}</script>
</body>

案例2：表单验证

【前端学习-25】【day04】正则表达式、表单验证、用户名验证相关推荐

redux-form的学习笔记二--实现表单的同步验证
(注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,我将用redux-f ...
html表单中默认选中的值,前端学习笔记一一HTML表单标签（form）
form表单细节一.表单 1.表单标签用于为用户输入创建 HTML 表单 2.表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 3.表单还可以包含 menus.text ...
前端学习（179）:表单元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
前端学习--Ajax(2) form表单
一.form表单组成:表单标签.表单域(采集信息).表单按钮(提交) 1.1 <form>的属性 action -- 向何处发送表单数据如果不写默认是当前页面url target -- ...
在php中表单传值怎么用,PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
【PHP学习】—PHP连接数据库实现表单页面的验证功能（七）
[PHP学习]-PHP连接数据库实现表单页面的验证功能(七)
HTML表单之邮箱验证
学习HTML,表单是一个很重要的知识,而表单最常用的可能就是表单的验证了:下面我介绍验证邮箱的一种方法: 先上代码:(注:这个代码是可以运行的,可以自己试试,把重点放在js和表单里面!) <!D ...
DOM编程事件正则表达式表单校验
目录一.增加二.删除三.查找购物车四.事件和事件对象 4.1 事件对象 4.2 目标事件对象 4.3 事件监听对象 4.4 文档事件对象 4.5 鼠标键盘事件对象 4.6 事件阻 ...
php 表单提交及验证 tp,ThinkPHP表单自动提交验证实例教程
ThinkPHP表单自动提交验证实例教程附加规则配合验证规则使用,包括: function 使用函数验证,前面定义的验证规则是一个函数名 callback 使用方法验证,前面定义的验证规则是一个当 ...

【前端学习-25】【day04】正则表达式、表单验证、用户名验证

【day04正则表达式】

一、正则表达式

1.1 什么是正则表达式

1.2 正则表达式的特点

二、正则表达式在js中的应用

2.1 创建正则表达式（两种方式）

三、正则表达式的特殊字符

3.1 边界符

3.2 字符类

3.3 常用正则表达式

3.4 量词符

3.5 括号总结

3.6 预定义类

四、正则表达式中的替换

4.1 replace替换

案例1：用户名验证

案例2：表单验证

【前端学习-25】【day04】正则表达式、表单验证、用户名验证相关推荐

最新文章

热门文章