- 正则表达式在js中的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var regexp = new RegExp(/123/)
console.log(regexp);
var rg = /123/
console.log(rg.test(123));
console.log(rg.test('abc'));
</script>
</body>
</html>
- 表单验证案例
window.addEventListener('load',function(){
var regtel = /^1[3|4|5|7|8]\d{9}$/;
var qqreg = /^[1-9]\d{4,}$/
var nichengreg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/
var mesreg = /^\d{6}$/
var tel = document.querySelector('.tel')
var qq = document.querySelector('.qq')
var mes = document.querySelector('.mes')
var nicheng = document.querySelector('.nicheng')
regexp(tel,regtel)
regexp(qq,qqreg)
regexp(nicheng,nichengreg)
regexp(mes,mesreg)
function regexp(ele,reg) {
ele.addEventListener('blur',function(){
if(reg.test(this.value)){
this.nextElementSibling.className = 'success'
this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 您的输入正确'
} else {
this.nextElementSibling.className = 'error'
this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 您的输入不正确'
}
})
}
})
- 注册页面的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人注册</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/register.css">
<script src="js/reg.js"></script>
</head>
<body>
<div class="w">
<header>
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
</header>
<div class="registerarea">
<h3>注册新用户
<div class="login">我有账号,去<a href="#">登陆</a></div>
</h3>
<div class="reg_form">
<form action="">
<ul>
<li><label for="">手机号:</label> <input type="text" class="inp tel">
<span class=""></span></li>
<li><label for="">QQ:</label> <input type="text" class="inp qq">
<span class="error"></span></li>
<li><label for="">昵称:</label> <input type="text" class="inp nicheng">
<span class="error"></span></li>
<li><label for="">短信验证码:</label> <input type="text" class="inp mes">
<span class="success"></span></li>
<li><label for="">登录密码:</label> <input type="password" class="inp">
<span class="error"> <i class="error_icon"></i> 手机号码格式不正确,请从新输入 </span></li>
<li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
<li><label for="">确认密码:</label> <input type="password" class="inp">
<span class="error"> <i class="error_icon"></i> 手机号码格式不正确,请从新输入 </span></li>
<li class="agree"><input type="checkbox" id="" name="">同意协议并注册
<a href="#">《知晓用户协议》</a>
</li>
<li><input type="submit" value="完成注册" class="btn"></li>
</ul>
</form>
</div>
</div>
<footer>
<div class="mod_copyright">
<div class="links">
<a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
品优购公益 | English Site | Contact U
</div>
<div class="copyright">
地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</div>
</body>
</html>
.w {
width: 1200px;
margin: 0 auto;
}
header {
height: 84px;
border-bottom: 2px solid #c81523;
}
.logo {
padding-top: 18px;
}
.registerarea {
margin-top: 20px;
height: 522px;
border: 1px solid #ccc;
}
.registerarea h3 {
height: 43px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
line-height: 42px;
padding: 0 10px;
font-size: 18px;
font-weight: 400;
}
.registerarea .login {
float: right;
font-size: 14px;
}
.registerarea .login a {
color: #c81623;
}
.reg_form {
width: 600px;
margin: 50px auto 0;
}
.reg_form ul li {
margin-bottom: 20px;
}
.reg_form ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg_form ul li .inp {
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.error {
color: #c81523;
}
.error_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url("../images/error.png") no-repeat;
margin-top: -2px;
}
.success {
color: green;
}
.success_icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
background: url("../images/success.png") no-repeat;
margin-top: -2px;
}
.safe {
padding-left: 167px;
}
.safe em {
padding: 0 12px;
color: #fff;
}
.safe .ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
padding-left: 95px;
}
.agree input {
vertical-align: middle;
}
.agree a {
color: #1b1ae6;
}
.btn {
width: 200px;
height: 34px;
background-color: #c81623;
font-size: 14px;
color: #ffff;
margin: 30px 0 0 70px;
}
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.links {
margin-bottom: 15px;
}
.links a {
margin: 0 3px;
}
.copyright {
line-height: 20px;
}