正则表达式 （规则表达式）
例
字面量 var reg1=/abc/
内置构造函数 var reg2=new RegExp(‘abc’)
元字符
-
\d 一个数字
var reg1=/ \d /
var str = ‘a1bc2d’
test()
console.log(reg1.test(str))
test()是用来检验是否符合，返回值为布尔值
\D 非数字
var reg=/ \D /
var str=‘b2345’
console.log(res.test(str))
\s 一个空格
var reg=/ \s /
var str=‘1234 abcd’
console.log(res.test(str))
\S 一个非空格
var reg = /\S/
var str = '1234 abcd'
console.log(reg.test(str))
\w 一个数字字母下划线
var reg = /\w/
var str = ‘@**@’
console.log(reg.test(str))
\W 一个非数字字母下划线
var reg = /\W/
var str = ‘@123_@’
console.log(reg.test(str))
. 一个除了换行以外的字符
console.log(‘123\nabc’)
限定符
1、 * 0-正无穷
var reg = /\d*/
var str = ‘12345abcde’
console.log(reg.test(str))
2、+ 1 - 正无穷
var reg = /\d+/
var str = ‘abcde’
console.log(reg.test(str))
3、? 0-1次
var reg = /\d?/
var str = ‘123abcde’
console.log(reg.test(str))
4、{n} 出现 n 次
var reg = /\d{2}/
var str = ‘1234e’
console.log(reg.test(str))
5、{n,} 出现 n - 正无穷次
6、{n,m} 出现 n - m 次
边界符
1、^ 以 … 开头
2、$ 以 … 结尾
var reg = /^\d?$/ // 以一个数字开头 一个数字结尾 这个数字出现 0 - 1 次(只有一个数字)
var str = ‘1’
console.log(reg.test(str)) //=>true
var reg = /^\d{2}$/ 以数字开头，数字结尾，并且出现两次
var str = ‘121’
console.log(reg.test(str)) //=>false
其他符号
1、 \转义符 本身有特殊含义的字符加上 \ 就没有特殊意义了 本身没有特殊含义的字符加上 \ 就有了特殊含义
var reg=/^.$/
console.log(res.test(’*’))
2、() 把一堆东西当成一个整体
3、 |占位或
|| 逻辑或
var reg=/^(123|456)$/
4、[ ]中间的东西任选一个
5、- 至、到
var reg=/1$/
var str=‘c’
console.log(reg.test(str))
6.[^] 非
var reg=/^[a-z/$/
var str=‘1’
console.log(reg.test(str))
//这个意思就是除了(a-z的字母)
正则的方法
1.test()
test() 方法用于检测一个字符串是否匹配某个模式。返回值为布尔值
2.exec()
exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果，如果未找到匹配，则返回值为null
例如
var arr1=/\d{3}/g
var arr2=‘123abchsdjd456sdafjnk789’
var res =arr1.exec(arr2)
console.log(res) //=>会返回一个数组
标识符
g 全局匹配
i 忽略大小写
配合正则使用的字符串的方法
1、replace() 替换
var str = ‘dshjSMdhsjkdSMhdjshdSM’
str = str.replace(/SM/g,’**’)
console.log(str)
2、match() 把符合规则的字符放到一个数组里面返回
var str = ‘123abchsdjd456sdafjnk789’
var reg = /\d{3}/g
var res = str.match(reg)
console.log(res)
3、search() 找到符合规则的字符 返回对应的下标
var str = ‘abc123hsdjd456sdafjnk789’
var reg = /\d{3}/
var res = str.search(reg)
console.log(res)
补充
onblur 事件会在对象失去焦点时发生。
onfocus 事件
当 input 输入框获取焦点时执行一段 Javascript代码
制作注册表单，并实现警示功能
代码如下
<!DOCTYPE html>
<html lang="en">
<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>
* {
margin: 0;
padding: 0;
}
.box {
/* width: 600px; */
height: 600px;
border: 1px solid #000;
margin: 100px auto;
}
label {
display: flex;
height: 60px;
align-items: center;
position: relative;
}
input {
width: 300px;
height: 35px;
box-sizing: border-box;
padding-left: 15px;
color: #444;
}
span {
padding-right: 20px;
width: 100px;
text-align: right;
font-weight: 900;
}
.code {
width: 150px;
}
label a {
width: 140px;
margin-left: 10px;
height: 33px;
border: 1px solid #ddd;
color: #666;
text-decoration: none;
text-align: center;
line-height: 33px;
font-size: 14px;
background-color: #f7f7f7;
}
em {
color: #1b66c7;
font-style: normal;
}
p {
font-size: 12px;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 120px;
}
input[type=checkbox] {
width: 12px;
margin-right: 6px;
}
button {
border: none;
outline: none;
color: #fff;
line-height: 50px;
margin-left: 120px;
width: 350px;
height: 50px;
background-color: #4490f7;
}
i {
position: absolute;
color: #aaa;
font-size: 12px;
font-style: normal;
bottom: 15px;
left: 430px;
display: none;
}
b {
width: 200px;
height: 28px;
align-items: center;
font-weight: normal;
position: absolute;
color: red;
font-size: 12px;
font-style: normal;
bottom: 16px;
left: 430px;
padding-left: 20px;
/* background-image: url(./images/err_small.png); */
background-position: left center;
background-repeat: no-repeat;
/* display: none; */
}
ul {
position: absolute;
left: 430px;
padding-left: 10px;
list-style: circle;
width: 200px;
height: 70px;
border: 1px solid #ccc;
background-color: #f7f7f7;
list-style-position: inside;
/* display: flex; */
display: none;
flex-direction: column;
justify-content: center;
align-content: space-between;
}
li {
line-height: 20px;
font-size: 12px;
color: #333;
}
input:focus+i {
display: block;
}
input:focus+ul {
display: flex;
}
</style>
</head>
<body>
<div class="box">
<form action="" autocomplete="off">
<label>
<span>用户名</span>
<input type="text" placeholder="请设置用户名" id="uname" autofocus>
<i>设置后不可更改<br>用户名由数字字母下划线组成,最多14个字符</i>
<!-- b 标签是专门用来装 绿色和红色图标和文字的 -->
<b></b>
</label>
<label>
<span>手机号</span>
<input type="text" placeholder="可用于登录和找回密码" id="phone">
<i style="bottom: 24px;">请输入中国大陆手机号,其他用户不可见</i>
<b></b>
</label>
<label>
<span>密码</span>
<input type="password" placeholder="请设置登录密码" id="pwd">
<ul>
<li>长度为8~14个字符</li>
<li>支持数字,大小写字母和下划线</li>
<li>不允许有空格</li>
</ul>
<b></b>
</label>
<label>
<span>验证码</span>
<input type="text" placeholder="请输入验证码" class="code">
<a href="#">获取短信验证码</a>
</label>
<p><input type="checkbox">阅读并接受<em>《2003班级守则》及《千锋学生手册》</em></p>
<button>注册</button>
</form>
</div>
<script src="utils.js"></script>
<script>
var uname = my$("#uname")
var phone = my$("#phone")
on(uname, "blur", function() {
var str = this.value
var reg = /^\w{4,14}$/
var b = this.nextElementSibling.nextElementSibling
// console.log(b);
css(b, 'display', 'block')
if (reg.test(str)) {
css(b, 'backgroundImage', 'url(images/current.png)')
css(b, 'backgroundSize', '20px')
b.innerText = ""
} else {
css(b, 'backgroundImage', 'url(images/err_small.png)')
css(b, 'backgroundSize', '20px')
b.innerText = "给我好好写"
}
})
on(uname, 'focus', function() {
var b = this.nextElementSibling.nextElementSibling
css(b, 'display', 'none')
})
on(phone, 'focus', function() {
var b = this.nextElementSibling.nextElementSibling
css(b, 'display', 'none')
})
on(phone, "blur", function() {
var str = this.value
var reg = /^\w{4,14}$/
var b = this.nextElementSibling.nextElementSibling
// console.log(b);
css(b, 'display', 'block')
if (reg.test(str)) {
css(b, 'backgroundImage', 'url(images/current.png)')
css(b, 'backgroundSize', '20px')
b.innerText = ""
} else {
css(b, 'backgroundImage', 'url(images/err_small.png)')
css(b, 'backgroundSize', '20px')
b.innerText = "给我好好写"
}
})
</script>
</body>
</html>
需要引入事件绑定过的js
/*
工具类函数
*/
/*
检测一个字符串是否是可回文字符串
@param a 要检测的字符串
@return 返回值是一个布尔值
*/
function fn(a) {
return a.split('').reverse().join('') === a ? true : false
}
/*
求一个范围之间的随机数
@param a 范围下限
@param b 范围上限
@return 范围之间的随机数
*/
function getRandom(a, b) {
return Math.floor(Math.random() * (b - a + 1) + a)
}
/*
随机颜色
@return 随机颜色字符串
*/
function getColor() {
return "rgb(" + getRandom(0, 255) + "," + getRandom(0, 255) + "," + getRandom(0, 255) + ")"
}
/*
通过选择器获取元素
@param selector 要获取的元素的 id/class/标签名
@param context 从哪个范围获取
@return 获取到的元素或者元素伪数组
*/
function my$(selector, context) {
context = context || document
if (selector.indexOf('#') === 0) {
return document.getElementById(selector.slice(1))
}
if (selector.indexOf('.') === 0) {
return context.getElementsByClassName(selector.slice(1))
}
return context.getElementsByTagName(selector)
}
/*
获取/设置元素的样式
@param ele 元素
@param attr 要获取/设置的属性
@param value 要获取/设置的属性值
@return 获取/设置好的属性值
*/
function css(ele, attr, value) {
if (value) {
ele.style[attr] = value
}
// 有第三个参数就是设置 没有就是获取
return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr]
}
/*
绑定事件 兼容处理
@param ele 要绑定事件的元素
@param type 事件类型
@param fn 事件处理函数
*/
function on(ele, type, fn) {
if (ele.addEventListener) {
if (type.indexOf('on') === 0) {
type = type.slice(2)
}
ele.addEventListener(type, fn)
} else {
if (type.indexOf('on') !== 0) {
type = 'on' + type
}
ele.attachEvent(type, fn)
}
}
function off(){
}
/*
对 ie8 不支持 pageX pageY 做的兼容处理
@param e event 对象
@return 光标距离页面左边和上边的距离数据对象
*/
function page(e) {
if (e.pageX) {
return { x: e.pageX, y: e.pageY }
}
var _x = document.documentElement ? document.documentElement.scrollLeft + e.clientX : document.body.scrollLeft + e.clientX
var _y = document.documentElement ? document.documentElement.scrollTop + e.clientY : document.body.scrollTop + e.clientY
return { x:_x,y:_y}
}
a-z ↩︎
4609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
