我要评论案例：验证表单
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.defau {
width: 200px;
height: 20px;
}
.de1 {
background-position: 0 -20px;
}
</style>
</head>
<body>
<div class="container" id="dv">
<label for="qq">q q</label><input type="text" id="qq"><span></span><br/>
<label>手机</label><input type="text" id="phone"><span></span><br/>
<label>邮箱</label><input type="text" id="e-mail"><span></span><br/>
<label>座机</label><input type="text" id="telephone"><span></span><br/>
<label>姓名</label><input type="text" id="fullname"><span></span><br/>
</div>
<script src="common.js"></script>
<script>
//qq的
checkinput(my$("qq"),/^\d{5,11}$/);
//手机
checkinput(my$("phone"),/^\d{11}$/);
//邮箱
checkinput(my$("e-mail"),/^[0-9a-za-z_.-]+[@][0-9a-za-z_.-]+([.][a-za-z]+){1,2}$/);
//座机号码
checkinput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
//中文名字
checkinput(my$("fullname"),/^[\u4e00-\u9fa5]{2,6}$/);
//给我文本框,给我这个文本框相应的正则表达式,我把结果显示出来
//通过正则表达式验证当前的文本框是否匹配并显示结果
function checkinput(input,reg) {
//文本框注册失去焦点的事件
input.onblur=function () {
if(reg.test(this.value)){
this.nextelementsibling.innertext="正确了";
this.nextelementsibling.style.color="green";
}else{
this.nextelementsibling.innertext="让你得瑟,错了吧";
this.nextelementsibling.style.color="red";
}
};
}
</script>
</body>
</html>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论