<!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">QQ</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>
var qq =document.getElementById("qq");
var phone =document.getElementById("phone");
var mail=document.getElementById("e-mail");
var telephone=document.getElementById("telephone")
var fullName=document.getElementById("fullName")
var span=document.getElementsByTagName("span");
console.log(span);
qq.onblur=function () {
var reg =/[1][0-9]{9}/
if(qq.value.length==10) {
if (reg.test(qq.value)) {
span[0].innerHTML = "输入正确"
} else {
span[0].innerHTML = "输入错误"
}
if (qq.value.length == 0) {
span[0].innerHTML = ""
}
}else{
span[0].innerHTML = "输入错误"
}
}
phone.onblur=function () {
var reg =/([1][358][0-9]{9})|([1][7][0137][0-9]{8})/
if(reg.test(phone.value)){
span[1].innerHTML="输入正确"
}else{
span[1].innerHTML="输入错误"
}
if (phone.value.length==0) {
span[1].innerHTML=""
}
}
mail.onblur=function () {
var reg = /^[a-z0-9]+([._\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
if(reg.test(mail.value)){
span[2].innerHTML="输入正确"
}else{
span[2].innerHTML="输入错误"
}
if (mail.value.length==0) {
span[2].innerHTML=""
}
}
telephone.onblur=function () {
var reg =/0\d{2}-\d{7,8}/
if(reg.test(telephone.value)){
span[3].innerHTML="输入正确"
}else{
span[3].innerHTML="输入错误"
}
if (telephone.value.length==0) {
span[3].innerHTML=""
}
}
fullName.onblur=function () {
var reg =/[\u4e00-\u9fa5]{2,3}/
if(reg.test(fullName.value)){
span[4].innerHTML="输入正确"
}else{
span[4].innerHTML="输入错误"
}
if (fullName.value.length==0) {
span[4].innerHTML=""
}
}
</script>
</body>
</html>
模拟输入事件
最新推荐文章于 2023-10-19 09:22:32 发布