javascript表单正则应用

2024-03-01 11:20:04 123

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

html部分

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>新用户注册</title>
<linkrel="stylesheet"href="./css/regForm.css"type="text/css">
<scripttype="text/javascript"src="js/regForm.js"></script><!--外部样式和JS*-->
</head>
<body>
<divid="section">
<formaction=""method="get"id="form">
<tableid="table">
<tr>
<td>用户名</td>
<td><inputid="username"type="text"class="text"></td>
<td><divclass="icon"id="usernameicon"></div></td>
</tr>
<tr>
<td>Email</td>
<td><inputtype="text"class="text"id="email"></td>
<td><divclass="icon"id="emailicon">(请输入正确的Email地址)</div></td>
</tr>
<tr>
<td>密码</td>
<td><inputtype="password"id="password"></td>
<td><divid="pwicon"class="icon">(请输入强度较高的密码)</div></td>
</tr>
<tr>
<td>密码强度</td>
<td>
<divclass="pwstrength"id="low">弱</div>
<divclass="pwstrength"id="middle">中</div>
<divclass="pwstrength"id="strong">强</div>
</td>
<td></td>
</tr>
<tr>
<td>确认密码</td>
<td><inputid="cfpw"type="password"class="text"value=""></td>
<td><divclass="icon"id="cfpwicon"></div></td>
</tr>
<tr>
<td>MSN</td>
<td><inputid="msn"type="text"class="text">
</td>
<td><divclass="icon"id="msnicon"></div></td>
</tr>
<tr>
<td>QQ</td>
<td><inputtype="text"class="text"id="qq">
</td>
<td><divid="qqicon"class="icon">(请输入正确的QQ号码)</div></td>
</tr>
<tr>
<td>办公电话</td>
<td><inputid="offphone"type="text"class="text"></td>
<td><divclass="icon"id="offphoneicon"></div></td>
</tr>
<tr>
<td>家庭电话</td>
<td><inputid="homephone"type="text"class="text">
</td>
<td><divclass="icon"id="homephoneicon"></div></td>
</tr>
<tr>
<td>手机</td>
<td><inputtype="text"class="text"id="phone"></td>
<td><divclass="icon"id="phoneicon">(请输入正确的手机号)</div></td>
</tr>
<tr>
<td>密码提示问题</td>
<td>
<selectclass="text"name="question"value="">
<optionvalue=""selected>请选择密码提示问题</option>
<optionvalue="">你热爱编程吗？</option>
<optionvalue="">你的中学名字是？</option>
<optionvalue="">最开心的事是什么？</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>密码问题答案</td>
<td><inputid="answer"type="text"class="text"></td>
<td><divclass="icon"id="answericon"></div></td>
</tr>
<tr>
<td></td>
<tdclass="lasttext"><inputtype="radio">我已看过并接受《<ahref="">用户协议</a>》</td>
<td></td>
</tr>
<tr>
<td></td>
<td><inputtype="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:15pxauto;
position:relative;
}
#table{
width:600px;
height:550px;
background-color:#fff;
position:absolute;
font-size:18px;
line-height:5px;
border-radius:5px;
box-shadow:0015px2pxrgba(0,0,0,0.4);
padding:20px30px;
box-sizing:border-box;
width:80%;
margin:010%;
}
#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;
}
#tabletrtd{
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的情况下进行操作

//封装一下兼容性函数
varEV={
//绑定事件兼容
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事件处理
vareMail=document.getElementById("email");
EV.addEvent(eMail,"blur",checkEmail);
functioncheckEmail(){
varemail=document.getElementById("email").value;
varemailicon=document.getElementById("emailicon");
varepatt=newRegExp("\\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";
}
}
//密码强度检测
varpwd=document.getElementById("password");
EV.addEvent(pwd,"blur",checkCode);
functioncheckCode(){
varpwdv=document.getElementById("password").value;
varlow=document.getElementById("low");
varmiddle=document.getElementById("middle");
varstrong=document.getElementById("strong");
varpwssicon=document.getElementById("phoneicon");
varpwdpatt1=/\d+/g;//数字
varpwdpatt2=/[a-zA-Z]+/g;//字母
varpwdpatt3=/(\W)+/g;//特殊字符
varbooldata1,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号码
varqq=document.getElementById("qq");
EV.addEvent(qq,"blur",checkQQ);
functioncheckQQ(){
varqqicon=document.getElementById("qqicon");
varqqtext=document.getElementById("qq").value;
varqqpatt=/^[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";
}
}
//检测手机号
varphone=document.getElementById("phone");
EV.addEvent(phone,"blur",checkPhone);
functioncheckPhone(){
varphoneicon=document.getElementById("phoneicon");
varphonenum=document.getElementById("phone").value;
varphonepatt=/^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";
}
}

//检测用户名
varusername=document.getElementById("username");
EV.addEvent(username,"blur",checkUser);
functioncheckUser(){
varusercon=document.getElementById("username").value;
varusernameicon=document.getElementById("usernameicon");
varunpatt=/[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";
}
}
//确认密码
varCfpw=document.getElementById("cfpw");
EV.addEvent(Cfpw,"blur",cfPw);
functioncfPw(){
varcfpw=document.getElementById("cfpw").value;
varcfpwicon=document.getElementById("cfpwicon");
varpwd=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
varMsn=document.getElementById("msn");
EV.addEvent(Msn,"blur",checkMsn);
functioncheckMsn(){
varmsn=document.getElementById("msn").value;
varmsnicon=document.getElementById("msnicon");
varmsnpatt=/\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";
}
}
//办公电话
varofficephone=document.getElementById("offphone");
EV.addEvent(officephone,"blur",checkoffPhone);
functioncheckoffPhone(){
varoffphone=document.getElementById("offphone").value;
varoffphoneicon=document.getElementById("offphoneicon");
varoffpatt=/(\(\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";
}
}
//家庭电话
varHomephone=document.getElementById("homephone");
EV.addEvent(Homephone,"blur",checkHomephone);
functioncheckHomephone(){
varhomephone=document.getElementById("homephone").value;
varhomephoneicon=document.getElementById("homephoneicon");
varhomepatt=/(\(\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";
}
}
//问题答案
functioncheckAnswer(){
varanswer=document.getElementById("answer").value;
varanswericon=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";
}
}
//登录注册
varlogin=document.getElementById("login");
EV.addEvent(login,"click",Login);
functionLogin(){
varform=document.getElementById("form");
if(username.value==""){
alert("用户名不能为空!");
this.value.focus();
returnfalse;
}
if(password.value==""){
alert("密码不能为空!");
this.value.focus();
returnfalse;
}
if(email.value==""){
alert("email不能为空!");
this.value.focus();
returnfalse;
}
else{
varinfo=confirm("信息填写完整，确定注册吗?");
if(info==true){
window.open("http://www.eduasksz.com","_blank");
}
}
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

javascript表单正则应用

热门推荐

随机推荐