* 1:通过构造函数创建对象
* 2：字面量的方式创建对象
*
* */
var reg=new RegExp(/\d{5}/);
var str="我的电话号码是10086";
//调用方法验证字符串是否匹配
var flag=reg.test(str);
console.log(flag);//true
//字面量的方式创建正则表达式对象
var reg1=/\d{1,5}/;
var flags=reg1.test("我的幸运数字是：777");
console.log(flags);
//验证密码的强度
<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: 120px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
</head>
<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="../DOM/commer.js"></script>
<script>
// //获取文本框注册键盘抬起事件
// ver("pwd").onkeyup=function () {
// //每次键盘抬起都要获取文本框中的内容，验证文本框中有什么东西，得到一个级别，然后下面的div显示对应的颜色
// //如果密码长度小于6，则没必要判断
// if(this.value.length>=6){
// var lvl=getLvl(this.value);
// if(lvl==1){
// //弱
// ver("strengthLevel").className="strengthLv1";
// }else if(lvl==2){
// //中
// ver("strengthLevel").className="strengthLv2";
// }else if(lvl==3){
// //强
// ver("strengthLevel").className="strengthLv3";
// }else {
// ver("strengthLevel").className="strengthLv0";
// }
// }else {
// ver("strengthLevel").className="strengthLv0";
// }
// };
//优化===============》
//获取文本框抬起事件
ver("pwd").onkeyup=function(){
ver("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value):0);
};
//给我密码，我返回相应的级别
function getLvl(pwd) {
var lvl=0;//默认级别
//密码中是否有数字，或者字母，或者特殊符号
if(/[0-9]/.test(pwd)){
lvl++;
}
//判断密码中有没有字母
if(/[a-zA-Z]/.test(pwd)){
lvl++;
}
//判断密码中有没有特殊符号
if(/[^0-9a-zA-Z_]/.test(pwd)){
lvl++;
}
return lvl;
}
//验证用户输入的是不是邮箱
请您输入邮箱地址：<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.backgroundColor="green";
}else {
this.style.backgroundColor="red";
}
}
//验证表单
<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 src="../DOM/commer.js"></script>
<script>
//qq
checInput(ver("qq"),/^\d{5,11}$/);
//手机
checInput(ver("phone"),/^\d{11}$/);
//邮箱
checInput(ver("e-mail"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
//座机
checInput(ver("telephone"),/^[0-9]{3,4}[-][0-9]{7,8}$/);
//姓名
checInput(ver("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
//给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checInput(input,reg) {
//文本框注册失去焦点事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText="正确";
this.nextElementSibling.style.color="green";
}else {
this.nextElementSibling.innerText="错误";
this.nextElementSibling.style.color="red";
}
}
}
</script>
