您的位置：首页 > Web前端 > JavaScript

JS—简单表单验证代码

2020-03-29 13:25 671 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 280px;
margin: 20px auto;
border: 1px solid #333333;
text-align:center;
padding: 10px 0px;
}
#box span{
display: block;
height: 20px;
font-size: 12px;
color: #808080;
text-align: right;
padding: 0px 18px;
}
</style>
</head>
<body>
<div id="box">
输入密码：<input type="text" name="" id="tex1" value="" /><span></span>

再次输入：<input type="text" name="" id="tex2" value="" /><span></span>

手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="text" name="" id="tex3" value="" /><span></span>

<button type="button">按钮</button>
</div>
<script type="text/javascript">
//==============================
var tex1=document.querySelector("#tex1");
var tex2=document.querySelector("#tex2");
var tex3=document.querySelector("#tex3");
var btn=document.querySelector("#box button");
var tex1OnOff=tex2OnOff=tex3OnOff=false;
tex1.oninput=function(){
var a=b=c=0;
var igReg=/^.{6,12}$/;
if(!igReg.test(this.value)){
this.nextElementSibling.innerHTML="请输入6-12位密码";
tex1OnOff=false;
return;
}
var numReg=/\d/;
if(numReg.test(this.value)){
a=1;
}
var azReg=/[a-z]/i;
if(azReg.test(this.value)){
b=1;
}
var tsReg=/[^\da-z]/i;
if(tsReg.test(this.value)){
c=1;
}
switch(a+b+c){
case 1:
this.nextElementSibling.innerHTML="简单";break;
case 2:
this.nextElementSibling.innerHTML="一般";break;
case 3:
this.nextElementSibling.innerHTML="安全";break;
}
tex1OnOff=true;

if(tex2.value==="")return;

if(this.value===tex2.value){
tex2.nextElementSibling.innerHTML="密码输入一致";
tex2OnOff=true;
}else{
tex2.nextElementSibling.innerHTML="密码输不入一致";
tex2OnOff=false;
}
}
tex2.oninput=function(){
if(this.value===tex1.value){
this.nextElementSibling.innerHTML="密码输入一致";
tex2OnOff=true;
}else{
this.nextElementSibling.innerHTML="密码输不入一致";
tex2OnOff=false;
}
}
tex3.oninput=function(){
var callReg=/^1[3-9]\d{9}$/;
if(callReg.test(this.value)){
this.nextElementSibling.innerHTML="符合";
tex3OnOff=true;
}else{
this.nextElementSibling.innerHTML="不符合";
tex3OnOff=false;
}
}
btn.onclick=function(){
if(tex1OnOff&&tex2OnOff&&tex3OnOff){
alert("验证成功");
return;
}
if(!tex1OnOff){
alert("密码错误");
return;
}
if(!tex2OnOff){
alert("验证密码错误");
return;
}
if(!tex3OnOff){
alert("请输入正确的手机号码");
return;
}
}
</script>
</html>
  • 点赞
  • 收藏
  • 分享
  • 文章举报
wanguo_S 发布了6 篇原创文章 · 获赞 0 · 访问量 98 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航