<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{width: 350px;}
tr td div{color: #cccccc;}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="10" width="1000px" align="center">
<tr>
<th>新用户名</th>
<td><input type="text" id="yh"/></td>
<td width="30%">
<div id="xyh">用户名为6-10位数字字母下划线中文</div>
</td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" id="mm"/></td>
<td width="30%">
<div id="xmm">密码为6-10位数字字母下划线</div>
</td>
</tr>
<tr>
<th>确认密码</th>
<td><input type="password" id="qm"/></td>
<td width="30%">
<div id="xqm">请输入和密码真确的数字字母下划线</div>
</td>
</tr>
<tr>
<th>真实姓名</th>
<td><input type="text" id="xm"/></td>
<td width="30%">
<div id="zxm">只能输入中文</div>
</td>
</tr>
<tr>
<th>手机号</th>
<td><input type="text" id="sj"/></td>
<td width="30%">
<div id="xsj">请输入真确数字</div>
</td>
</tr>
<tr>
<th>qq号</th>
<td><input type="text" id="qq"/></td>
<td width="30%">
<div id="xqq">请输入6-10位的数字</div>
</td>
</tr>
<tr>
<th>身份证号</th>
<td><input type="text" id="sf"/></td>
<td width="30%">
<div id="xsf">请输入真确18位的数字字母</div>
</td>
</tr>
<tr>
<th>邮箱</th>
<td><input type="text" id="yx"/></td>
<td width="30%">
<div id="xyx">请输入真确的邮箱格式</div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
//用户名
var yh=document.getElementById("yh")
var xyh=document.getElementById("xyh")
yh.onblur=function(){
var rng=yh.value;
//最重要的一步，只要这点看懂了，就OK了，
//设置6到10位的数字字母下划线
var skt=/^[0-9A-z\u4e00-\u9fa5]{6,10}$/
if(skt.test(rng)){
xyh.style.color="darkturquoise";
xyh.innerHTML="输入真确";
}else{
xyh.style.color="red";
xyh.innerHTML="您输入的格式不正确";
}
}
//密码
var mm=document.getElementById("mm")
var xmm=document.getElementById("xmm")
mm.onblur=function(){
var ice=mm.value;
var ig=/^[0-9A-z]{6,10}$/
if(ig.test(ice)){
xmm.style.color="darkturquoise";
xmm.innerHTML="输入真确";
}else{
xmm.style.color="red";
xmm.innerHTML="您输入的密码不正确";
}
}
//确认密码
var qm=document.getElementById("qm")
var xqm=document.getElementById("xqm")
qm.onblur=function(){
var ice=mm.value;
var ong=qm.value;
var ol=/^[0-9A-z]{6,10}$/
if(ice==ong&&ol.test(ong)){
xqm.style.color="royalblue"
xqm.innerHTML="输入真确"
}else{
xqm.style.color="red"
xqm.innerHTML="两次密码不一致"
}
}
//真实姓名
var xm=document.getElementById("xm")
var zxm=document.getElementById("zxm")
xm.onblur=function(){
var rng=xm.value;
var pc=/^[\u4e00-\u9fa5]{2,5}$/
if(pc.test(rng)){
zxm.style.color="blue";
zxm.innerHTML="输入真确"
}else{
zxm.style.color="red"
zxm.innerHTML="格式错误"
}
}
//手机号
var sj=document.getElementById("sj")
var xsj=document.getElementById("xsj")
sj.onblur=function(){
var asd=sj.value;
var ps=/^1(3|4|5|7|8)[0-9]{9}$/
if(ps.test(asd)){
xsj.style.color="blue";
xsj.innerHTML="输入真确"
}else{
xsj.style.color="red";
xsj.innerHTML="格式错误";
}
}
//qq号
var qq=document.getElementById("qq")
var xqq=document.getElementById("xqq")
qq.onblur=function(){
var obg=qq.value;
var box=/^[1-9][0-9]{5,11}$/
if(box.test(obg)){
xqq.style.color="blue";
xqq.innerHTML="输入真确"
}else{
xqq.style.color="red";
xqq.innerHTML="输入错误"
}
}
//身份证号
var sf=document.getElementById("sf")
var xsf=document.getElementById("xsf")
sf.onblur=function(){
var scv=sf.value;
var svb=/^[1-9][0-9]{16}[0-9x]$/
if(svb.test(scv)){
xsf.style.color="blue";
xsf.innerHTML="输入真确";
}else{
xsf.style.color="red";
xsf.innerHTML="输入错误";
}
}
//邮箱
var yx=document.getElementById("yx")
var xyx=document.getElementById("xyx")
yx.onblur=function(){
var mnb=yx.value;
var mnv=/^[A-z0-9_\u4e00-\u9fa5]+@[A-z0-9_-]+(\.[A-z0-9_-]+)$/
if(mnv.test(mnb)){
xyx.style.color="blue";
xyx.innerHTML="输入真确";
}else{
xyx.style.color="red";
xyx.innerHTML="输入错误";
}
}
</script>
</html>
网友评论