这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 javascript 表单正则应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
以下是之前练习正则表达式时候做的 js 表单测试. input 里的 value 用. test() 比较以后,处理正则和需求,反馈,代码欠优化,但功能完善,仅供参考学习
html 部分
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 新用户注册
- </title>
- <link rel="stylesheet" href="./css/regForm.css" type="text/css">
- <script type="text/javascript" src="js/regForm.js">
- </script>
- <!--外部样式和JS*-->
- </head>
- <body>
- <div id="section">
- <form action="" method="get" id="form">
- <table id="table">
- <tr>
- <td>
- 用户名
- </td>
- <td>
- <input id="username" type="text" class="text">
- </td>
- <td>
- <div class="icon" id="usernameicon">
- </div>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- <input type="text" class="text" id="email">
- </td>
- <td>
- <div class="icon" id="emailicon">
- (请输入正确的Email地址)
- </div>
- </td>
- </tr>
- <tr>
- <td>
- 密码
- </td>
- <td>
- <input type="password" id="password">
- </td>
- <td>
- <div id="pwicon" class="icon">
- (请输入强度较高的密码)
- </div>
- </td>
- </tr>
- <tr>
- <td>
- 密码强度
- </td>
- <td>
- <div class="pwstrength" id="low">
- 弱
- </div>
- <div class="pwstrength" id="middle">
- 中
- </div>
- <div class="pwstrength" id="strong">
- 强
- </div>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- 确认密码
- </td>
- <td>
- <input id="cfpw" type="password" class="text" value="">
- </td>
- <td>
- <div class="icon" id="cfpwicon">
- </div>
- </td>
- </tr>
- <tr>
- <td>
- MSN
- </td>
- <td>
- <input id="msn" type="text" class="text">
- </td>
- <td>
- <div class="icon" id="msnicon">
- </div>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- <input type="text" class="text" id="qq">
- </td>
- <td>
- <div id="qqicon" class="icon">
- (请输入正确的QQ号码)
- </div>
- </td>
- </tr>
- <tr>
- <td>
- 办公电话
- </td>
- <td>
- <input id="offphone" type="text" class="text">
- </td>
- <td>
- <div class="icon" id="offphoneicon">
- </div>
- </td>
- </tr>
- <tr>
- <td>
- 家庭电话
- </td>
- <td>
- <input id="homephone" type="text" class="text">
- </td>
- <td>
- <div class="icon" id="homephoneicon">
- </div>
- </td>
- </tr>
- <tr>
- <td>
- 手机
- </td>
- <td>
- <input type="text" class="text" id="phone">
- </td>
- <td>
- <div class="icon" id="phoneicon">
- (请输入正确的手机号)
- </div>
- </td>
- </tr>
- <tr>
- <td>
- 密码提示问题
- </td>
- <td>
- <select class="text" name="question" value="">
- <option value="" selected>
- 请选择密码提示问题
- </option>
- <option value="">
- 你热爱编程吗?
- </option>
- <option value="">
- 你的中学名字是?
- </option>
- <option value="">
- 最开心的事是什么?
- </option>
- </select>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- 密码问题答案
- </td>
- <td>
- <input id="answer" type="text" class="text">
- </td>
- <td>
- <div class="icon" id="answericon">
- </div>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td class="lasttext">
- <input type="radio">
- 我已看过并接受《
- <a href="">
- 用户协议
- </a>
- 》
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- <input type="image" src="image/login.png" id="login">
- </td>
- <td>
- </td>
- </tr>
- </table>
- </form>
- </div>
- </body>
- </html>
css 部分 >>
- body{
- background:url("../image/10.png") repeat-x;
- }
- #section{
- width:1002px;
- height:612px;
- margin:15px auto;
- position:relative;
- }
- #table{
- width:600px;
- height:550px;
- background-color:#fff;
- position:absolute;
- font-size:18px;
- line-height:5px;
- border-radius: 5px;
- box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4);
- padding: 20px 30px;
- box-sizing: border-box;
- width: 80%;
- margin: 0 10%;
- }
- #table .pwstrength{
- float:left;
- height:30px;
- width:60px;
- line-height:30px;
- text-align:center;
- border-radius:4px;
- color:#000;
- }
- #table .text{
- width:215px;
- height:32px;
- }
- #password{
- width:215px;
- height:32px;
- }
- #table .lasttext{
- font-size:14px;
- }
- #table tr td{
- width:180px;
- }
- #table .icon{
- width:175px;
- height:24px;
- float:left;
- background:no-repeat;
- font-size:12px;
- color:#000;
- text-align:right;
- line-height:24px;
- }
javascript 部分,这边使用的是 dom2 级操作,先封装好事件对象,在 IE 和非 IE 的情况下进行操作
- //封装一下兼容性函数
- var EV ={
- //绑定事件兼容
- addEvent:function(node,ename,fn){
- if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加绑定事件
- node.attachEvent("on"+ename,fn);
- }else{
- node.addEventListener(ename,fn,false);
- }
- },
- removeEvent:function(node,ename,fn){
- if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加绑定事件
- node.detachEvent("on"+ename,fn);
- }else{
- node.removeEventListener(ename,fn,false);
- }
- }
- }
- window.onload=function(){
- //email地址检测 html事件处理
- var eMail = document.getElementById("email");
- EV.addEvent(eMail,"blur",checkEmail);
- function checkEmail(){
- var email = document.getElementById("email").value;
- var emailicon = document.getElementById("emailicon");
- var epatt = new RegExp("\\w+@[a-zA-Z0-9]+\\.[a-zA-Z0-9]{2,14}");
- //利用正则表达式
- if(epatt.test(email)){
- emailicon.style.backgroundImage="url('image/tick.png')";
- emailicon.innerHTML="";
- }
- else{
- emailicon.style.backgroundImage="url('image/cross.png')";
- emailicon.innerHTML="请输入正确的邮箱地址!";
- emailicon.style.color="#dd0000";
- }
- }
- //密码强度检测
- var pwd =document.getElementById("password");
- EV.addEvent(pwd,"blur",checkCode);
- function checkCode(){
- var pwdv =document.getElementById("password").value;
- var low =document.getElementById("low");
- var middle =document.getElementById("middle");
- var strong =document.getElementById("strong");
- var pwssicon =document.getElementById("phoneicon");
- var pwdpatt1 = /\d+/g; //数字
- var pwdpatt2 = /[a-zA-Z]+/g; //字母
- var pwdpatt3 = /(\W)+/g; //特殊字符
- var booldata1,booldata2,booldata3;
- if(pwdv.length<6){
- pwicon.style.backgroundImage="url('image/cross.png')";
- pwicon.innerHTML="密码不得少于6位数!";
- pwicon.style.color="#dd0000";
- }
- if(pwdv==""){
- pwicon.style.backgroundImage="url('image/cross.png')";
- pwicon.innerHTML="密码项不能为空!";
- pwicon.style.color="#dd0000";
- }
- if(pwdpatt1.test(pwdv)){
- booldata1 = true;
- }
- if(pwdpatt2.test(pwdv)){
- booldata2 = true;
- }
- if(pwdpatt3.test(pwdv)){
- booldata3 = true;
- }
- if(booldata1||booldata2||booldata3){
- low.style.backgroundColor="#CB4042";
- pwicon.style.backgroundImage="url('image/tick.png')";
- pwicon.innerHTML="";
- } //强度低
- if((booldata1&&booldata2)||(booldata1&&booldata3)||(booldata3&&booldata2)){
- middle.style.backgroundColor="#F7C242";
- pwicon.style.backgroundImage="url('image/tick.png')";
- pwicon.innerHTML=""; //强度中
- }
- if(booldata1&&booldata2&&booldata3){
- strong.style.backgroundColor="#227D51";
- pwicon.style.backgroundImage="url('image/tick.png')";
- pwicon.innerHTML=""; //强度强
- }
- }
- //检测QQ号码
- var qq =document.getElementById("qq");
- EV.addEvent(qq,"blur",checkQQ);
- function checkQQ(){
- var qqicon =document.getElementById("qqicon");
- var qqtext =document.getElementById("qq").value;
- var qqpatt = /^[1-9](\d{5,10})$/;
- if(qqpatt.test(qqtext)){
- qqicon.style.backgroundImage="url('image/tick.png')";
- qqicon.innerHTML="";
- }
- else{
- qqicon.style.backgroundImage="url('image/cross.png')";
- qqicon.innerHTML="请输入5至11位数的QQ号码";
- qqicon.style.color="#dd0000";
- }
- }
- //检测手机号
- var phone = document.getElementById("phone");
- EV.addEvent(phone,"blur",checkPhone);
- function checkPhone(){
- var phoneicon =document.getElementById("phoneicon");
- var phonenum = document.getElementById("phone").value;
- var phonepatt = /^0?(13|15|14|18)[0-9]{9}$/;
- if(phonepatt.test(phonenum)){
- phoneicon.style.backgroundImage="url('image/tick.png')";
- phoneicon.innerHTML="";
- }
- else{
- phoneicon.style.backgroundImage="url('image/cross.png')";
- phoneicon.innerHTML="请输入正确的手机号!";
- phoneicon.style.color="#dd0000";
- }
- }
- //检测用户名
- var username = document.getElementById("username");
- EV.addEvent(username,"blur",checkUser);
- function checkUser(){
- var usercon = document.getElementById("username").value;
- var usernameicon =document.getElementById("usernameicon");
- var unpatt = /[A-Za-z0-9_\-\u4e00-\u9fa5]{6,18}/;
- if(unpatt.test(usercon)){
- usernameicon.style.backgroundImage="url('image/tick.png')";
- usernameicon.innerHTML="";
- }
- else{
- usernameicon.style.backgroundImage="url('image/cross.png')";
- usernameicon.innerHTML="用户名至少大于6个字符!";
- usernameicon.style.color="#dd0000";
- if(usercon==""){
- usernameicon.style.backgroundImage="url('image/cross.png')";
- usernameicon.innerHTML="用户名不能为空!";
- usernameicon.style.color="#dd0000";
- }
- }
- //确认密码
- var Cfpw =document.getElementById("cfpw");
- EV.addEvent(Cfpw,"blur",cfPw);
- function cfPw(){
- var cfpw =document.getElementById("cfpw").value;
- var cfpwicon=document.getElementById("cfpwicon");
- var pwd =document.getElementById("password").value;
- if(cfpw==pwd&&cfpw!=""){
- cfpwicon.style.backgroundImage="url('image/tick.png')";
- cfpwicon.innerHTML="";
- }else{
- cfpwicon.style.backgroundImage="url('image/cross.png')";
- cfpwicon.innerHTML="输入的密码不一致!";
- cfpwicon.style.color="#dd0000";
- }
- }
- //MSN
- var Msn = document.getElementById("msn");
- EV.addEvent(Msn,"blur",checkMsn);
- function checkMsn(){
- var msn =document.getElementById("msn").value;
- var msnicon =document.getElementById("msnicon");
- var msnpatt = /\w+@[a-zA-Z0-9]+\.[a-zA-Z0-9]{2,14}/;
- if(msnpatt.test(msn)){
- msnicon.style.backgroundImage="url('image/tick.png')";
- msnicon.innerHTML="";
- }else{
- msnicon.style.backgroundImage="url('image/cross.png')";
- msnicon.innerHTML="msn应为正确邮箱地址!";
- msnicon.style.color="#dd0000";
- }
- }
- //办公电话
- var officephone =document.getElementById("offphone");
- EV.addEvent(officephone,"blur",checkoffPhone);
- function checkoffPhone(){
- var offphone = document.getElementById("offphone").value;
- var offphoneicon =document.getElementById("offphoneicon");
- var offpatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/;
- if(offpatt.test(offphone)){
- offphoneicon.style.backgroundImage="url('image/tick.png')";
- offphonecon.innerHTML="";
- }else{
- offphoneicon.style.backgroundImage="url('image/cross.png')";
- offphoneicon.innerHTML="例:010-88888888";
- offphoneicon.style.color="#dd0000";
- }
- }
- //家庭电话
- var Homephone =document.getElementById("homephone");
- EV.addEvent(Homephone,"blur",checkHomephone);
- function checkHomephone(){
- var homephone =document.getElementById("homephone").value;
- var homephoneicon =document.getElementById("homephoneicon");
- var homepatt = /(\(\d{3,4}\)|\d{3,4}-)?\d{8}/;
- if(homepatt.test(homephone)){
- homephoneicon.style.backgroundImage="url('image/tick.png')";
- homephonecon.innerHTML="";
- }else{
- homephoneicon.style.backgroundImage="url('image/cross.png')";
- homephoneicon.innerHTML="例:010-88888888";
- homephoneicon.style.color="#dd0000";
- }
- }
- //问题答案
- function checkAnswer(){
- var answer =document.getElementById("answer").value;
- var answericon =document.getElementById("answericon");
- if(answer!=""){
- answericon.style.backgroundImage="url('image/tick.png')";
- answercon.innerHTML="";
- }else{
- answericon.style.backgroundImage="url('image/cross.png')";
- answericon.innerHTML="密码问题答案不能为空!";
- answericon.style.color="#dd0000";
- }
- }
- //登录注册
- var login =document.getElementById("login");
- EV.addEvent(login,"click",Login);
- function Login(){
- var form =document.getElementById("form");
- if(username.value==""){
- alert("用户名不能为空!");
- this.value.focus();
- return false;
- }
- if(password.value==""){
- alert("密码不能为空!");
- this.value.focus();
- return false;
- }
- if(email.value==""){
- alert("email不能为空!");
- this.value.focus();
- return false;
- }
- else{
- var info =confirm("信息填写完整,确定注册吗?");
- if(info==true){
- window.open("http://www.eduasksz.com","_blank");
- }
- }
- }
- }
- }
来源: http://www.phperz.com/article/17/0530/328053.html