JS正则对象(正则表达式)方法属性总结及表单验证例题
正则表达式是一个描述字符规则的对象。
前端往往有大量的表单数据校验的工作,采用正则表达式会使得数据校验的工作量大大减轻,如邮箱验证,手机号码,等等。
正则表达式的组成:普通字符+特殊字符
正则的创建
构造方法
let reg=new RagExp("格式控制字符串","修饰符")
字面量方法
let reg=/格式控制字符串/修饰符
eg:let reg=new RagExp("a") 至少包含一个a
let reg=/a/
let reg=/^a$/只能是a,并且是一个
let reg=l/^a+$/只能是a,至少是一个
特殊符号
单个字符
^:正则开始
$ : 正则结束
. : 元字符, 表示任意一个字符
\. : 表示转义字符 \.表示.
+: 表示其前面紧挨着的字符至少出现1次 等价{1,}
* :表示其前面出现的字符至少出现过0次 等价{0,}
?: 表示其前面出现的字符至少出现过0次,至多1次 等价{0,1}
| : 表示或者
组合字符
\d : 0-9之间的任意一个数字 \d只占一个位置
\D : 除了\d
\w : 数字,字母 ,下划线 0-9 a-z A-Z _
\W : 除了\w
\s : 空格或者空白等
\S : 除了\s
括号
{m,n}表示括号前面紧挨着的字符至少出现m个,至多出现n个
{m}表示括号前面紧挨着的字符只能出现m个
{m,}表示括号前面紧挨着的字符至少出现m个
[ ] 表示括号内的任意一个字符[wd3h]
[a-z]表示任意一个小写字母 [a-zA-Z0-9]
[^ ]表示非括号内的任意一个字符
格式控制字符串例题:
必须以b开头,从第二位起至少3个a,至多5个a
/^ba{3,5}$/
必须是5,只能是6位
/^5{6}$/
必须是0-9的数字,只能是6位
/^\d{6}$/
必须是一个由字母或数字或下划线组成的用户名,并且只能在6-18位之间
/^\w{6,18}$/
定义一个由字母或数字或下划线组成的用户名,并且首字母不为数字,并且只能在6-18位之间
/^\D\w{5,17}$/
密码,可以输入所有的字符,并且至少是6位
/^.{6,}$/
手机号以13、15、16开头的11位数字
/^1[356]\d{9}$/
只能输入一位所有小写所有大写,所有数字之间的值
/^[a-zA-Z0-9]$/
只能输入一位除了1ab之外的数
/^[^1ab]$/
只能输入两个中文
/^[\u4e00-\u9fa5]$/
正则对象相关方法
ps:不要带^$,带全局修饰符g
test
功能:判断某个目标字符串是否符合该正则对象的格式
参数:reg.test(目标字符串)
返回值:布尔值
exec
功能:将目标字符串中满足格式的字符返回
参数:reg.exec(目标字符串)
返回值:返回满足正则对象格式的子串,存储在一个长度为1的数组中
一些string的方法
match
功能:使用正则表达式对字符串执行查找并返回符合条件内容
参数:str.match(reg)
返回值:将包含查找内容的结果作为数组返回,能够找到所有满足正则条件的字符,并全部保存至一个数组
例题
let reg=/\D/g;
var str="123d45631f";
console.log(str.match(reg))
search
功能:查找与正则表达式条件满足的第一个字符串的位置
参数:str.search(reg)
返回值:返回与正则表达式条件满足的第一个字符串的位置,找不到返回-1
例题:
let str="wo shi GeBi de lao wang";
let reg=/gebi/i;
console.log(str.search(reg));
(这里用全局没有用,只能返回第一个找到的字符)
replace
功能:返回根据正则表达式进行文字替换后的字符串
参数:str.replace(reg,"替换内容")
返回值:新字符串
例题
let reg=/laowang/ig;
let str="laowang的隔壁住着laowang";
console.log(str.replace(reg,"xiaowang"))
修饰符
i:忽略大小写
g:全局
正则的应用
表单的验证
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="tiao.html" method="get"><input type="text" name="" id="" value="" placeholder="请输入用户名" /><span></span><br><input type="text" name="" id="" value="" placeholder="请输入密码" /><span></span><br><input type="submit" name="" id="" value="提交" /></form></body>
</html>
<script type="text/javascript">let xinput = document.querySelectorAll("input");let xspan = document.querySelectorAll("span");let xform = document.querySelector("form");let flagid = null;let flagwd = null;xinput[0].onblur = () => {let reg = /^\D\w{5,10}$/;if (reg.test(xinput[0].value)) {xspan[0].innerHTML = `输入格式正确`;flagid = true;} else {xspan[0].innerHTML = `格式有误`;xinput[0].value = "";flagid = false;}}xinput[1].onblur = () => {let reg1 = /^\d+$/;let reg2 = /^[a-zA-Z]+$/;let reg3 = /^[!@#$%]+$/;let reg4 = /\d/;let reg5 = /[a-zA-Z]/;let reg6 = /[!@#$%]/;if (reg1.test(xinput[1].value) || reg3.test(xinput[1].value) || reg3.test(xinput[1].value)) {xspan[1].innerHTML = `密码强度低`;flagwd = false;} else if (reg4.test(xinput[1].value) && reg5.test(xinput[1].value) && reg6.test(xinput[1].value)) {xspan[1].innerHTML = `密码强度高`;flagwd = true;} else {xspan[1].innerHTML = `密码强度中`;flagwd = true;}}xform.onsubmit = () => {if (flagid && flagwd) {return true;} else {return false;}}
</script>
JS正则对象(正则表达式)方法属性总结及表单验证例题相关推荐
- 【前端】JS的BOM和DOM,事件,表单验证案例
先看小练习1:开关灯 用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
- html表单验证方法,简述HTML交互式表单验证方法
在 HTML 中创建表单总是有点复杂.你首先得将 HTML 标记编写正确,然后需要确保每一个表单项在提交之前都有一个可用的值,最后还需要在有问题时用提醒来告知用户. 还好 HTML5 引入了一些新的特 ...
- 常用正则表达式,常用表单验证javascript代码
常用正则表达式,常用表单验证javascript代码 function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0 ...
- 常用正则表达式,常用表单验证javascript代码(转)
function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0-9]{9}$/g)) return true; / ...
- vue 表单验证正则_vue表单验证
首先需要自己写正则表达式,正则学得不好就不乱指点了=> 方法 1如果你是单独建的js文件 先引入正则表达式文件才进行下一步 或者直接在组件内写正则 2data({ const regExpID ...
- jquery parsley ajax,用户体验超棒且功能强大使用简单的javascript表单验证 - Parsley.js...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的 ...
- 前端:JS/32/form对象(表单)(form对象的属性,方法和事件),受返回值影响的两个事件(onclick事件,onsubmit事件),获取表单的元素对象的三种方式,表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
- js给对象动态添加属性的2种方法
js给对象动态添加属性的2种方法 需求: 要给每个课程添加一个判断鼠标是否hover 分析: 因为数据是动态渲染的,所以需要动态的给他添加一个flag标记,就得在数据渲染之前先拿到,然后再添加一个自己 ...
- js正则的test方法一会返回true一会返回false
问题 在使用js正则的test方法时,一会返回true一会返回false. 如图: 原因 参考 MDN Web Docs 文档 如果正则表达式设置了全局标志,test() 的执行会改变正则表达式 la ...
最新文章
- 桌面虚拟化最佳实践4—存储规划(下)
- matlab13节点线路模型,13节点配电网的建模与仿真.doc
- MySQL修改数据表存储引擎的3种方法介绍
- 零基础带你学习MySQL—查询数据库(二)
- 服务器来电后自动开机|xfs文进系统备份恢复linux下误删除的文件
- 【Python3之模块及包的导入】
- OpenCV-camShift 算法
- stm32单片机相同系列型号代码移植
- R语言--异常值检测
- dell台式计算机主板电池,台式机主板电池怎么拆
- 谁是史上最强-用爬虫分析IMDB TOP250电影数据
- 搜索引擎点击日志聚类实现相关搜索
- php6基因突变,基因突变中那些“披着狼皮的羊” 很多“致命性”基因突变正在被证实无害...
- 【日常学习】使用anaconda管理环境并安装cuda和cudnn和tensorflow
- Proxmox Mail Gateway (PMG) 安装及简单设置
- SuSe Linux防火墙配置指定IP或IP段可访问
- jmeter线程组之jp@gc - Ultimate Thread Group
- 自定义钉钉机器人发消息@所有人
- mybatis报错:argument type mismatch
- 苹果手机python软件_python编程教学app