正则表达式在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> //1.利用regExp对象来创建 正则表达式 var regexp = new RegExp(/123/) console.log(regexp); // 2.利用字面量来创建 正则表达式 var rg = /123/ // test方法检测输入的字符串是否符合正则表达式要求的规范 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,}$/ //qq的正则表达式 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)){ // console.log('正确的'); this.nextElementSibling.className = 'success' this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 您的输入正确' } else { // console.log('错误的'); 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"> <!-- 引入我们自己注册的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; }
