javascript表单正则应用

前端之家收集整理的这篇文章主要介绍了javascript表单正则应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

以下是之前练习正则表达式时候做的js表单测试. input里的value用.test()比较以后,处理正则和需求,反馈,代码欠优化,但功能完善,仅供参考学习

html部分

<Meta charset="UTF-8"> <a href="https://www.jb51.cc/tag/xinyonghu/" target="_blank" class="keywords">新用户</a><a href="https://www.jb51.cc/tag/zhuce/" target="_blank" class="keywords">注册</a>
用户名
提示问题请选择密码提示问题

css部分>>

<div class="jb51code">
<pre class="brush: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.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的情况下进行操作

<div class="jb51code">
<pre class="brush:js;">
//封装一下兼容性函数
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,fn){
if(navigator.userAgent.toLowerCase().indexOf("ie")!=-1){ //在ie下添加绑定事件
node.detachEvent("on"+ename,fn);
}else{
node.removeEventListener(ename,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,checkCode);
function checkCode(){
var pwdv =document.getElementById("password").value;
var low =document.getElementById("low");
var middle =document.getElementById("middle");
var h3 =document.getElementById("h3");
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="#CB<a href="https://www.jb51.cc/tag/404/" target="_blank" class="keywords">404</a>2";
    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){
    h3.style.backgroundColor="#227D51";
    pwicon.style.backgroundImage="url('image/tick.png')"; 
    pwicon.innerHTML="";              //强度强
  }
} 

//检测QQ号码
var qq =document.getElementById("qq");
EV.addEvent(qq,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,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,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,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,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,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,checkHomephone);
function checkHomephone(){
var homephone =document.getElementById("homephone").value;
var homephoneicon =document.getElementById("homephoneicon");
var homepatt = /((\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");
}
}
}
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/42043.html

猜你在找的JavaScript相关文章