js中正则用法相关总结、界面拖拽效果的实现

1、正则表达式对象

什么是正则 : 正则的规则用于规范用户输入数据的合法性
正则表达式的组成 :
普通字符 和 特殊字符组成
特殊字符 :具有特定的含义
正则表达式的定义 :正则表达式对象 RegExp

   var reg = /正则表达式/修饰符;  

特殊字符 :

单字符 :
^ 正则开始
$ 正则结束
| 表示或者 一般与 () 连用
. 表示任意一个字符
\ 表示转义把正则中具有特定含义的字符转成原意.表示小数点

量词 :
+ 等价 {1,} 其前面紧挨着的字符至少出现1次
? 等价 {0,1} 其前面紧挨着的字符 出现0次 或1次

  • 等价 {0,} 其前面紧挨着的字符至少出现0次

组合字符 :
\d : 表示0—9之间的任意一个字符
或0|1|2|3|4|5|6|7|8|9 、[0123456789]、[0-9]
\D : 表示非数字
\w : 表示任意一个单词字符(数字或字母或下划线 中的任意一个)
\W : 表示任意一个非单词字符(除了数字、字母、下划线中任意一个)
\s : 表示任意一个空白字符
\S : 表示任意一个非空白字符

表示特定含义的括号:
{ } 表示范围
{m} m>0 表示其前面紧挨着的字符只能出现m次
{m,n} m,n大于0表示其前面紧挨着的字符至少出现m次至多出现n次
{m,} m>0表示其前面紧挨着的字符至少出现m次
[ ] 表示括号内的任意一个字符表示任意一个中文[\u4e00-\u9fa5]
[358] 表示括号内或3或5或8
[a-z] 表示任意一个小写字母
[^] 表示非括号内的任意一个字符
[ ^358]表示非括号内或3或5或8
[ ^a-z] 表示除了小写字母
( ) 表示优先级最高 一般与 | 连用

修饰符 :
i 表示不区分大小写
g 表示全局查找
正则代码详解
2、表单验证
需要通过表单提交事件完成 onsubmit
事件需要添加到 form 标签上
运用表单实现对用户名和密码的验证
运用表单实现对用户名和密码的验证

3、正则中的相关方法(参考js文档手册)(下面的5个方法都可以操作正则表达式)

正则表达式相关方法:
test() 检验一个字符串是否符合某一个正则规范,如果符合返回true,否则返回false
用法: reg.test(str)

exec() 根据正则表达式查找,结果会返回一个长度为1的数组 (数组只有一个值) 找不到返回null

用法: reg.exec(str);

正则中字符串的方法(可以操作正则表达式):

search方法 返回与正则表达式查找内容匹配的第一个子字符串的位置。 找不到返回-1 ( indexOf() )
用法: str.search(reg);


match() 方法 使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。
用法: str.match(reg)


str.replace(原字符串,新字符串) 第二个参数可以是一个函数( 不是es5以下的版本功能,而是es6版本中新增功能 )

replace() 通过正则表达式替换,返回结果 是原字符串被替换后的新字符串

用法: str.replace(正则表达式,要替换的新字符串) 如果想实现全局替换,在正则表达式上加一个修饰符 g

修饰符 :
i 不区分大小写
g 全局查找
正则的全局运用

4、拖拽
拖拽思路 :
第一步 : 鼠标按下事件 onmousedown
记录鼠标距离按下的元素的内部偏移量

disx = e.offsetX  ||  e.layerX
disy - e.offsetY  ||   e.layerY

第二步 : 鼠标移动事件 onmousemove
设置拖拽元素的left值 和 top值

left = e.pageX - disx
top = e.pageY - disy

第三步 : 鼠标抬起事件 onmouseup
取消移动和按下

document.onmousemove = null;  或 ""

边界处理
获取可视窗口的宽度和高度
宽度 window.innerWidth document.documentElement.clientWidth
高度 window.innerHeightdocument.documentElement.clientHeight(offsetWidth /offsetHeight不可以使用)

扩展 : 取消拖拽时的文字选中状态
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
实现拖拽效果代码详解1
实现拖拽效果代码详解2

练习:根据描述写出正则表达式:

只能用数字开头,长度在6–18位之间
/^KaTeX parse error: Expected 'EOF', got '\d' at position 5: / \̲d̲:0-9任意一个数 .任…/
以字母开头,数字结尾,中间任意一个字符
[a-zA-Z] 任意一位字母 .任意字符 \d 任意一位数字
/^ [a-zA-Z].\d / 6 / . 6 , / 密码不能少于6位的字符 /^.{6,} /
变量的命名正则表达式(不能用数字开头 由字母、数字、下划线 、$组成)
/^ a-ZA-Z $_$/
以010开头的座机号(后面是8位数字)
/^010-\d{8} $/
手机号以13开头,以8结尾
/^13\d{8}8 $/
密码只能用6个

* 表达*的原意
/^*{6} $/

第一位是数字,第二位是A或a,后面至多出现6个字符
/^\d[aA].{0,6}$/

第一位是数字,第二位是任意一个字符,后面只能由字母、数字、下划线组成,共8位
/^\d.\w{6}$/

写出中国人姓名正则 2–4个中文 [\u4e00-\u9fa5]
/^ [\u4e00-\u9fa5]{2,4}$/

写一个qq号的正则,至少5位 至多12位数字
/ ^ [1-9]\d{4,11}$/

邮编检验 共6位数字 第一位不能是0
/^ [1-9]\d{5}$/

检验压缩包 xxx.zip或xxx.rar或xxx.tar 三个格式
/^\w+.(zip|rar|tar)$/

电子邮件 (@符号前后使用单词字符即可)

/^\w+@\w+(.\w+)+$/

手机号 1 3|5|8|7

身份证 (18位 考虑最后一位可能为x)
/^ [1-9]\d{16}(\d|x)$/

账户名只能使用数字字母下划线,不能数字开头,长度在6–18之间

//完美拖拽
完美拖拽详解

猜你喜欢

转载自blog.csdn.net/ZHANGJIN9546/article/details/93157065