正则表达式
匹配特殊字符或有特殊搭配原则的字符的最佳选择
RegExp对象
正则表达式是一种规则对象
转义字符 \
跳过语法，打印字符的文本形式
换行符 \n
文档内无法识别多空格和回车（操作系统内\r（行结束）\n，有些操作系统回车没有\r），它都会识别为一个空格
\t tab键
字符串多行编写
正常情况下，字符串不允许多行（回车）编写
在行末尾用转义字符把回车转掉
两种创建方式及其规则
var regExp = /^abc/i;//是否含有片段，i=ignoreCase 忽略大小写 g=全局匹配,遇到匹配不停下来，继续匹配
//m=多行匹配 ^=以什么开头
regExp.test(abc);返回布尔值
regExp.match(abc);返回匹配内容
var reg2 = new RegExp("abc","i");
var reg2 = new RegExp(regExp);不是同一个
var reg2 = RegExp(regExp);是同一个
var reg = /[1234567890]/g;//有一位从1234567890中匹配
var reg = /[0-9A-z]/g;//0-9 A-z
var reg = /[^a]/g;//非a
var reg = /(abc|bcd)/g;//相当于表达式
var reg = /[\w\d]/g;
元字符
不是匹配视觉上的而是字符上的
^$开头结尾可以有效限定一个字符串
\w [0-9A-z_]
\W [^\w]
\d [0-9]
\D [^\d]
\s 空白字符：空格，制表tab\t，回车\r，换行\n，垂直换行\v，换页
\b 单词边界，单词的开头和末尾
\u Unicode编码
. [^\r\n]
$ 以前面的一个字符结尾
Unicode
\u0000 16进制四位，代表很多种语言的字符（第一层的00忽略了）
Unicode编码有很多层
\u010000 - \u01ffff 这是一层
量词
n+ 匹配任何包含至少一个n的字符串
n* 匹配任何包含零个或多个n的字符串
n？ 匹配任何包含零个或一个n的字符串
n{X} 匹配包含X个n的序列的字符串
n{X,Y} 匹配包含X个至Y个n的序列的字符串，尽量取最多个
n{X,} 匹配包含至少X个n的序列的字符串
验证密码强度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv{
width: 300px;
height:200px;
position: absolute;
left:300px;
top:100px;
}
.strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 160px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16"><!--课外话题-->
<div>
<em>密码强度：</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取文本框注册键盘抬起事件
document.getElementById("pwd").onkeyup=function () {
//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
//如果密码的长度是小于6的,没有必要判断
// if(this.value.length>=6){
// var lvl= getLvl(this.value);
// my$("strengthLevel").className="strengthLv"+lvl;
// }else{
// my$("strengthLevel").className="strengthLv0";
// }
document.getElementById("strengthLevel").className="strengthLv"+(this.value.length>=6?getLv(this.value) :0);
};
//给我密码,我返回对应的级别
function getLv(pwd) {
var lv=0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if(/[0-9]/.test(pwd)){
lv++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lv++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lv++;
}
return lv;//最小的值是1,最大值是3
}
</script>
<script>
/*
*
* 密码: 数字,字母,特殊符号
*
* 密码: 只有数字- 或者是只有字母,或者是只有特殊符号---1级---弱
* 两两组合: 数字和字母, 数字和特殊符号, 字母和特殊符号 -----2级----中
* 三者都有: 数字和字母和特殊符号------3级-----强
*
* */
// //获取文本框注册键盘抬起事件
// my$("pwd").οnkeyup=function () {
// //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
// //如果密码的长度是小于6的,没有必要判断
// if(this.value.length>=6){
// var lvl=getLvl(this.value);
// if(lvl==1){
// //弱
// my$("strengthLevel").className="strengthLv1";
// }else if(lvl==2){
// my$("strengthLevel").className="strengthLv2";
// }else if(lvl==3){
// my$("strengthLevel").className="strengthLv3";
// }else{
// my$("strengthLevel").className="strengthLv0";
// }
// }else{
// my$("strengthLevel").className="strengthLv0";
// }
//
//
// };
//
// //给我密码,我返回对应的级别
// function getLvl(pwd) {
// var lvl=0;//默认是0级
// //密码中是否有数字,或者是字母,或者是特殊符号
// if(/[0-9]/.test(pwd)){
// lvl++;
// }
// //判断密码中有没有字母
// if(/[a-zA-Z]/.test(pwd)){
// lvl++;
// }
// //判断密码中有没有特殊符号
// if(/[^0-9a-zA-Z_]/.test(pwd)){
// lvl++;
// }
// return lvl;//1 3
// }
//
</script>
</body>
</html>
验证用户输入的邮箱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
请您输入邮箱地址:<input type="text" value="" id="email"/> *<br/>
<script>
//如果输入的是邮箱,那么背景颜色为绿色,否则为红色
//获取文本框,注册失去焦点的事件
document.getElementById("email").onblur = function () {
//判断这个文本框中输入的是不是邮箱
var reg = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
if (reg.test(this.value)) {
this.style.border = "1px solid green";
} else {
this.style.border = "1px solid red";
}
};
</script>
</body>
</html>
校验表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.defau {
width: 200px;
height: 20px;
}
.de1 {
background-position: 0 -20px;
}
</style>
</head>
<body>
<div class="container" id="dv">
<label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/>
<label>手机</label><input type="text" id="phone"><span></span><br/>
<label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label>电话</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>
//qq的
checkInput(document.getElementById("qq"),/^\d{5,11}$/);
//手机
checkInput(document.getElementById("phone"),/^\d{11}$/);
//邮箱
checkInput(document.getElementById("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
//座机号码
checkInput(document.getElementById("telephone"),/^\d{3,4}[-]\d{7,8}$/);
//中文名字
checkInput(document.getElementById("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
//给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checkInput(input,reg) {
//文本框注册失去焦点的事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="true";
this.nextElementSibling.style.color="green";
}else{
this.nextElementSibling.innerText="error";
this.nextElementSibling.style.color="red";
}
};
}
</script>
</body>
</html>
验证用户输入的是否为中文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//点击按钮,验证用户输入的是不是中文名字,如果是中文名字，则文本框的背景为绿色,否则为红色
$(function () {
//按钮的点击事件
$("#btn").click(function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
var flag=reg.test($("#txt").val());
if(flag){
$("#txt").css("backgroundColor","green");
}else{
$("#txt").css("backgroundColor","red");
}
});
});
</script>
</head>
<body>
请输入中文：<input type="text" value="" id="txt"/><br/>
<input type="button" value="验证" id="btn"/>
</body>
</html>
扫一扫
3742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
