javascript表单正则应用
程序员文章站
2022-06-14 08:37:30
以下是之前练习正则表达式时候做的js表单测试.
input里的value用.test()比较以后，处理正则和需求，反馈，代码欠优化，但功能完善，仅供参考学习
html...
以下是之前练习正则表达式时候做的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>email</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>qq</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");
}
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。