<style>
*{list-style:none;}
</style>
</head>
<body>
<ul>
<li><span>用户名:</span><input type="text" id="user"/><span></span></li>
<li><span>手机号码:</span><input type="text" id="tel"/><span></span></li>
<li><span>验证码:</span><input type="text" id="yz"/><span></span><span></span><li>
<li><span>密码:</span><input type="text" id="poss"/><span></span></li>
<li><input type="button" id="btn" value="注册"/></li>
</ul>
</body>
<script>
var ouser=document.getElementById("user")
var otel=document.getElementById("tel")
var oyz=document.getElementById("yz")
var oposs=document.getElementById("poss")
var obtn=document.getElementById("btn")
var u=t=false; //if 小括号判断真假
ouser.onblur=function(){ //判断用户名,失去焦点验证输入是否正确
reg=/^[\u2E80-\u9FFF]{2,4}$/ //正则判断用户名
if(reg.test(this.value)){ //判断正则
this.nextElementSibling.innerHTML="输入正确" //给后面一个span里面加提示,并判断是否正确
u=true;
}else{
this.nextElementSibling.innerHTML="输入不正确"
u=false
}
}
otel.onblur=function(){
reg=/^[1]\d{10}$/
if(reg.test(this.value)){
this.nextElementSibling.innerHTML="手机号格式正确"
t=true;
}else
this.nextElementSibling.innerHTML="手机号格式不正确"
t=false
}
oyz.onclick=function(){ //点击时获取验证码
var random=Math.round(Math.random()*9999)
var num=random.toString()
for(i=0;i<num.length;i++){
oyz.nextElementSibling.innerHTML=num;
}
}
oyz.onblur=function(){
reg=/^\d{4}$/
if(reg.test(this.value)){
alert("验证码正确")
}else
alert("验证码不正确")
}
oposs.onblur=function(){ //密码的等级,判断简单 一般 困难
numReg=/\d/; //简单 纯数字
azReg=/[a-z]/i; //一般 字母
tsReg=/^\d[a-z]/i; //困难
var n=a=t=0; //
if(numReg.test(this.value)){
n=1
}if(azReg.test(this.value)){
a=1
}if(tsReg.test(this.value)){
t=1;
}switch(n+a+t){
case 1:
this.nextElementSibling.innerHTML="简单"
break;
case 2:
this.nextElementSibling.innerHTML="一般"
break;
case 3:
this.nextElementSibling.innerHTML="困难"
}
}
obtn.onclick=function(){
if(u && t){
alert("注册成功")
}else{
alert("请重新填写")
}
}
</script>
简易版表单验证
最新推荐文章于 2022-12-06 10:30:13 发布