首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

分享JS表单验证源码（带错误提示及密码等级）

Posted in Javascript onJanuary 05, 2020

先晒图

分享JS表单验证源码（带错误提示及密码等级）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Index</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 头部 -->
<header>
 <div class="header-wrap">
 <!-- 左侧 -->
 <div class="header-left">
 <div class="logo">
 <img src="img/logo.png">
 </div>
 <div class="logo-text">
 <span class="strong">XX高铁客户服务中心 | </span>
 <span>客户服务</span>
 </div> 
 </div>
 <div class="header-right">
 <span>意见反馈  <a href="#">test@com</a></span>
 <span>您好，请<a href="#"> 登录</a>  |  <a href="#">注册</a></span>
 <div class="show-nav">
 <a href="#">
  我的XX
  <img src="img/arrow.png">
 </a>
 <div class="hide_nav">
  <ul>
  <li class="first-li">未完成订单</li>
  <li>已完成订单（改/退）</li>
  <li class="line">我的保险</li>
  <li class="line">查勘个人信息</li>
  <li>账户安全</li>
  <li class="line">常用联系人</li>
  <li class="line">重点旅客预约</li>
  <li>遗失物品寻找</li>
  <li class="line">服务查询</li>
  <li class="line">投诉</li>
  <li>建议</li>
  </ul>
 </div>
 </div>
 <span class="phone">
 <img src="img/phone.png">
 <a href="#">手机版</a>
 </span> 
 </div>
 </div>
</header>
<!-- 主体部分 -->
<div class="content">
 <p class="title">
 <span class="strong">您现在的位置：</span>
 <span>客运首页 > 注册</span>
 </p>
 <div id="Total">
 <div id="Title">账户信息</div>
 <div class="item">
 <span class="important">*</span>
 <label for="userAccount">用 户 名 :</label>
 <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
 <span class="item_">6-30位字母、数字或“_”，字母开头</span>
 </div>
 <div class="item" style="margin-bottom: -28px;">
 <span class="important">*</span>
 <label for="userPass">登陆密码 :</label>
 <input type="password" id="userPass" placeholder=" 6-20位字母、数字或符号" style="top: 15px;">
 <span id="first"></span>
 <span id="second"></span>
 <span id="third"></span>
 <span class="item_" style="display: block;margin-top: 39px;margin-left: 161px;"></span>
 </div>
 <div class="item">
 <span class="important">*</span>
 <label for="userPass_">确认密码 :</label>
 <input type="password" id="userPass_" placeholder=" 再次输入您的登录密码">
 <span class="item_"></span>
 </div>
 <div class="item">
 <span class="important">*</span>
 <label for="userName">姓名 :</label>
 <input type="text" id="userName" placeholder=" 请输入姓名">
 <span class="item_" id="show_div"><a href="#" class="line">姓名填写规则</a></span>
 <div class="hide_div">
 <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br>
2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br>
3.姓名中有繁体字无法输入时，可用简体替代。<br>
4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写
 </p>
 </div>
 </div>
 <div class="item">
 <span class="important">*</span>
 <label for="idinfo">身份证号 :</label>
 <select name="idinfo" id="idinfo">
 <option value="" selected="selected">二代身份证</option>
 <option value="">港澳通行证</option>
 <option value="">台湾通行证</option>
 <option value="">护照</option>
 </select>
 </div>
 <div class="item" style="margin-top: 51px;">
 <span class="important">*</span>
 <label for="information">证件号码 :</label>
 <input type="text" id="information" placeholder=" 请输入您的证件号码">
 <span class="item_"></span>
 </div>
 <div class="item">
 <span class="important">*</span>
 <label for="email">邮
箱 :</label>
 <input type="email" id="email" placeholder="请输入正确邮箱格式">
 <span class="item_"></span>
 </div>
 <div class="item">
 <span class="important">*</span>
 <label for="telephone">手机号码 :</label>
 <input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
 <span class="item_">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
 </div>
 <div class="item">
 <span class="important">*</span>
 <label for="curtomer">旅客类型 :</label>
 <select name="curtomer" id="curtomer">
 <option value="" selected="selected">成人</option>
 <option value="">儿童</option>
 <option value="">学生</option>
 <option value="">残疾军人</option>
 <option value="">伤残人民警察</option>
 </select>
 <span class="item_"></span>
 </div>
 <div id="end">
 <input type="checkbox" id="choose">
 <label for="choose">我已阅读并同意遵守<a href="#">《中国铁路客户服务中心网站服务条款》</a></label>
 <div class="btn_box">
 <button id="handup">下一步</button>
 </div>
 </div>
 </div>
</div>
<!-- 底部 -->
<footer>
 <p>关于我们 | 网站声明</p>
 <p>Copyright © 2019 test.com All rights reserved | 京ICP备 xxxxxxxx号</p>
</footer>
<script src="js/index.js"></script>
</body>
</html>

style.css

label {
 cursor: pointer; }

a{
 color:inherit;
}

* {
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
 box-sizing: border-box; }

/*头部*/
header{
 width:100%;
 height:120px;
 background-color:rgb(239,239,239);
 border-bottom:2px solid rgb(36,135,201);
}

.header-wrap{
 width:1200px;
 margin:0 auto;
}

.header-wrap span,
.header-wrap img{
 cursor:pointer;
}

.header-wrap a:hover{
 color:rgb(251,116,3);
}
/*导航左侧*/
.header-left{
 float:left;
 width:500px;
}

.logo{
 float:left;
 width:100px;
 margin-right:28px;
}

.logo-text{
 float:left;
 width:300px;
 color:rgb(110,110,110);
 height: 120px;
 line-height: 120px;
}

.logo-text .strong{
 font-size: 20px;
 font-weight: bold;
 color: rgb(80,80,80);
}
/*导航右侧*/
.header-right{
 float:right;
 width:700px;
 height: 120px;
 line-height: 120px;
 padding-left:60px;
 position: relative;
}

.header-right img{
 width:14px;
}

.header-right span{
 margin-right:30px;
 float:left;
}

.show-nav{
 cursor:pointer;
 position: relative;
 z-index: 5;
 float:left;
}
/*隐藏区域*/
.hide_nav{
 display: none;
 position: absolute;
 width: 154px;
 background-color: #fff;
 border: 1px solid rgb(251,116,3);
 left: 0;
 font-size: 14px;
 top: 86px;
}

.show-nav:hover .hide_nav{
 display: block;
}

.hide_nav ul{
 width: 100%;
 padding: 0 10px;
}

.hide_nav ul li{
 line-height: 37px;
 height: 37px;
 width: 100%;
 color:rgb(110,110,110);
 cursor:pointer;
}

.hide_nav ul li:hover{
 color:rgb(251,116,3);
}
.line{
 border-bottom:1px dotted rgb(110,110,110);
}
.phone{
 margin-left:20px;
}
/*图标和文字垂直居中对齐*/
.phone img, .phone a{
 vertical-align:middle;
}
/*主体*/
.content{
 width:1200px;
 background: white;
 margin:0 auto;
 height: 1115px;
}

.title{
 margin-top:20px;
 margin-left:5px;
}

.title span{
 color:rgb(110,110,110);
}

.title span.strong{
 font-size: 20px;
 font-weight: bold;
 color: rgb(80,80,80);
}

#Total {
 box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
 width: 1200px;
 min-height: 800px;
 margin: 30px auto;
 border-radius: 10px;
 overflow: hidden;
 border-left: 0.5px solid rgba(0, 0, 0, 0.32);
 border-right: 0.5px solid rgba(0, 0, 0, 0.32);
 border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); 
}

#Total #Title {
 background: rgb(251,116,3);
 color: white;
 width: 100%;
 height: 50px;
 line-height: 50px;
 font-size: 20px;
 padding-left: 18px;
 margin-bottom: 60px; 
}

#Total .item, #Total .item_ {
 width: 90%;
 margin: 10px auto;
 font-size: 16px;
 font-weight: bold;
 position: relative; 
}

#Total .item.item, #Total .item_.item {
 margin-top: 25px; 
}


#Total .item .important, #Total .item_ .important {
 color: rgb(251,116,3);
 margin-left: 62px; 
}

#Total .item input, #Total .item_ input {
 position: absolute;
 width: 300px;
 height: 30px;
 top: 32%;
 left: 15%;
 margin-top: -20px;
 font-size: 15px;
 outline: none;
 border: 1px solid rgba(0, 0, 0, 0.2);
 transition: box-shadow .5s; 
}

#Total .item input:focus, #Total .item_ input:focus {
 box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; 
}

#Total .item.item_, #Total .item_.item_ {
 height: 30px; 
 font-size: 15px;
 color: rgb(251,116,3);
 font-weight: lighter;
 margin: 0;
 display: inline-block;
 margin-left: 473px;
}

#Total .item_.item_{
 position: relative;
 top: -21px;
}

.item_ a{
 text-decoration: underline;
}

select{
 width: 297px;
 margin-left: 10px;
 height: 34px;
 font-size: 14px;
 color: rgb(110,110,110);
}

#first{
 display: inline-block;
 z-index: 5;
 position: relative;
 width:50px;
 height:10px;
 background-color: red;
 margin-left: 320px;
}

#second{
 display: inline-block;
 z-index: 5;
 position: relative;
 width:50px;
 height:10px;
 background-color: #ccc;
}

#third{
 display: inline-block;
 z-index: 5;
 position: relative;
 width:50px;
 height:10px;
 background-color: #ccc;
}

#Total #end {
 text-align: center;
 height: 160px;
 line-height: 50px;
 border-top: 1px solid rgba(0, 0, 0, 0.8);
 width: 100%;
}

#Total #end #choose {
 margin-right: 6px; 
}

.btn_box{
 margin-top:20px;
}

#Total #end #handup {
 width: 197px;
 height: 30px;
 border: none;
 background: rgb(251,116,3);
 color: white;
 border-radius: 3px;
 margin-left: 10px; 
 cursor: pointer;
}

#Total #end #handup:hover{
 background: rgb(36,135,201);
}

#end a{
 color:rgb(36,135,201);
}
/*隐藏的姓名规则*/
.hide_div{
 position: absolute;
 width: 531px;
 font-size: 13px;
 left: 558px;
 border: 1px solid rgb(36,135,201);
 padding: 20px;
 line-height: 35px;
 top: 21px;
 color: rgb(110,110,110);
 display: none;
}

#show_div:hover+.hide_div{
 display: block;
}

/*底部*/
footer{
 height: 113px;
 background: #eee;
 text-align: center;
 padding: 40px;
 color: rgb(110,110,110);
 border-top:2px solid rgb(36,135,201);
}

index.js

//获取元素
var userAccount=document.getElementById('userAccount');
var userPass=document.getElementById('userPass');
var userPass_=document.getElementById('userPass_');
var userName=document.getElementById('userName');
var information=document.getElementById('information');
var email=document.getElementById('email');
var telephone=document.getElementById('telephone');
var handup=document.getElementById('handup');
var first=document.getElementById('first');
var second=document.getElementById('second');
var third=document.getElementById('third');
var choose=document.getElementById('choose');
var items=document.querySelectorAll(".item_");//获取所有提示元素的下标
//当鼠标离开输入框，产生验证
//格式正确 true
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false;
var test7=false;

//验证用户名
userAccount.onblur=function(){
 var reg=/^[a-zA-Z]{1}\w{5,29}$/;
 if(this.value==''){
 items[0].innerHTML='用户名不能为空';
 items[0].style.color='red';
 test1=false;
 }else{
 if(!reg.exec(userAccount.value)){
 items[0].innerHTML='6-30位字母、数字或“_”，字母开头';
 items[0].style.color='red';
 test1=false;
 }else{
 items[0].innerHTML='用户输入正确';
 items[0].style.color='green';
 test1=true;
 }
 }
}
//验证密码
userPass.onblur=function(){
 //默认样式
 first.style.backgroundColor='red';
 second.style.backgroundColor='#ccc';
 third.style.backgroundColor='#ccc';
 //匹配6-20位任意字符
 var reg=/^\S{6,20}$/;
 if(this.value==''){
 items[1].innerHTML='密码不能为空';
 items[1].style.color='red';
 test2=false;
 }else{
 if(!reg.exec(userPass.value)){//不符合要求
 items[1].innerHTML='请输入6-20位数字、字母或符号';
 items[1].style.color='red';
 test2=false;
 }else{
 items[1].innerHTML='';
 test2=true;
 checkPwd(this.value);
 }
 }
}
//密码强度弱，只匹配数字、字母或符号
var pattern1=/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/;
//密码强度中，两两组合
var pattern2=/^[0-9|a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/;
//密码强度高，数字、字母或符号三种组合
var pattern3=/\W[0-9a-zA-Z]*/;
//验证密码强弱的函数
function checkPwd(value){
 if(pattern1.test(value)){//密码强度弱
 first.style.backgroundColor='red';
 second.style.backgroundColor='#ccc';
 third.style.backgroundColor='#ccc';
 }else if(pattern2.test(value)){//密码强度中
 first.style.backgroundColor='red';
 second.style.backgroundColor='rgb(251,116,3)';
 third.style.backgroundColor='#ccc';
 }else if(pattern3.test(value)){//密码强度高
 first.style.backgroundColor='red';
 second.style.backgroundColor='rgb(251,116,3)';
 third.style.backgroundColor='green';
 }
}
//再次验证密码
userPass_.onblur=function(){
 if(this.value==''){
 items[2].innerHTML='密码不能为空';
 items[2].style.color='red';
 test3=false;
 }else{
 if(this.value!=userPass.value){
 items[2].innerHTML='两次密码输入不一致';
 items[2].style.color='red';
 test3=false;
 }else{
 items[2].innerHTML='两次输入一致';
 items[2].style.color='green';
 test3=true;
 }
 }
}
//验证姓名
userName.onblur=function(){
 var reg=/^[\u4e00-\u9fa5|a-zA-Z]{3,30}$/;
 if(this.value==''){
 items[3].innerHTML='姓名不能为空';
 items[3].style.color='red';
 test4=false;
 items[3].id='show_div';
 }else{
 if(reg.exec(userName.value)){
 items[3].innerHTML='姓名输入正确';
 items[3].style.color='green';
 test4=true;
 items[3].id='';//输入正确时不再提示信息
 }else{
 items[3].innerHTML='姓名只能包含中文或者英文，且字符在3-30个之间！';
 items[3].style.color='red';
 test4=false;
 items[3].id='show_div';
 }
 }
}
//验证身份证号
information.onblur=function(){
 var reg=/^\d{17}[0-9x]$/i;
 if(this.value==''){
 items[4].innerHTML='证件号码不能为空';
 items[4].style.color='red';
 test5=false;
 }else{
 if(!reg.exec(information.value)){
 items[4].innerHTML='请输入18位身份证号码';
 items[4].style.color='red';
 test5=false;
 }else{
 items[4].innerHTML='号码输入正确';
 items[4].style.color='green';
 test5=true;
 }
 }
}
//验证邮箱
email.onblur=function(){
 var reg=/^\w+@\w+.[a-zA-Z_]{2,4}$/;
 if(this.value==''){
 items[5].innerHTML='邮箱不能为空';
 items[5].style.color='red';
 test6=false;
 }else{
 if(!reg.exec(email.value)){
 items[5].innerHTML='请输入正确的邮箱';
 items[5].style.color='red';
 test6=false;
 }else{
 items[5].innerHTML='邮箱格式正确';
 items[5].style.color='green';
 test6=true;
 }
 }
}
//验证手机号
telephone.onblur=function(){
 var reg=/^1(3|4|5|6|7|8|9)\d{9}$/;
 if(this.value==''){
 items[6].innerHTML='手机号码不能为空';
 items[6].style.color='red';
 test7=false;
 }else{
 if(!reg.exec(telephone.value)){
 items[6].innerHTML='您输入的手机号码不是有效的格式！';
 items[6].style.color='red';
 test7=false;
 }else{
 items[6].innerHTML='手机格式正确';
 items[6].style.color='green';
 test7=true;
 }
 }
}
//点击下一步
handup.onclick=function(){
 if(test1&&test2&&test3&&test4&&test5&&test6&&test7&&choose.checked){
 location.href="http://www.imooc.com"; 
 }else{
 alert('填写有误！');
 }
}

再送一个简易版的

放图

分享JS表单验证源码（带错误提示及密码等级）

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Index</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="Total">
 <div id="Title">-- 账户信息 --</div>
 <div class="item">
 <span class="important">*</span>
 <label for="userAccount">用户名 :</label>
 <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
 </div>
 <p class="item_"></p>
 <br>
 <!--_____________________________________________________________________________________________-->
 <div class="item">
 <span class="important">*</span>
 <label for="userPass">登陆密码 :</label>
 <input type="password" id="userPass" placeholder=" 6-20位字母,数字或符号">
 </div>
 <p class="item_"></p>
 <br>
 <!--_____________________________________________________________________________________________-->
 <div class="item">
 <span class="important">*</span>
 <label for="userPass_">确认密码 :</label>
 <input type="password" id="userPass_">
 </div>
 <p class="item_"></p>
 <br>
 <!--_____________________________________________________________________________________________-->
 <div class="item">
 <span class="important">*</span>
 <label for="userName">姓名 :</label>
 <input type="text" id="userName" placeholder=" 请输入姓名,中文且最多五位">
 </div>
 <p class="item_"></p>
 <br>
 <!--_____________________________________________________________________________________________-->
 <div class="item">
 <span class="important">*</span>
 <label for="information">身份证号 :</label>
 <input type="text" id="information" placeholder=" 请输入身份证号">
 </div>
 <p class="item_"></p>
 <br>
 <!--_____________________________________________________________________________________________-->
 <div class="item">
 <span class="important">*</span>
 <label for="email">邮箱 :</label>
 <input type="email" id="email" placeholder=" 请输入正确邮箱格式">
 </div>
 <p class="item_"></p>
 <br>
 <!--_____________________________________________________________________________________________-->
 <div class="item">
 <span class="important">*</span>
 <label for="telephone">手机号码 :</label>
 <input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
 </div>
 <p class="item_"></p>
 <br>
 <!--__________________________________________________________________________________________________-->
 <div id="end">
 <input type="checkbox" id="choose">
 <label for="choose">我已阅读并同意遵守规定</label>
 <button id="handup">确认提交</button>
 </div>
</div>
</body>
</html>
<script src="js/test.js"></script>

style.css


label {
 cursor: pointer; }

* {
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
 box-sizing: border-box; }

a {
 color: inherit; }

body {
 background: rgba(0, 0, 0, 0.1); }

#Total {
 box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
 background: white;
 width: 60%;
 min-height: 800px;
 margin: 50px auto;
 border-radius: 10px;
 overflow: hidden;
 border-left: 0.5px solid rgba(0, 0, 0, 0.32);
 border-right: 0.5px solid rgba(0, 0, 0, 0.32);
 border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); }
 #Total #Title {
 background: #6385d1;
 color: white;
 width: 100%;
 letter-spacing: 5px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 font-size: 20px;
 font-weight: bold; }
 #Total .item, #Total .item_ {
 width: 90%;
 margin: 10px auto;
 height: 25px;
 line-height: 25px;
 font-size: 18px;
 font-weight: bold;
 position: relative; }
 #Total .item.item, #Total .item_.item {
 margin-top: 20px; }
 #Total .item .important, #Total .item_ .important {
 color: #6385d1; }
 #Total .item input, #Total .item_ input {
 position: absolute;
 width: 50%;
 height: 40px;
 top: 50%;
 left: 15%;
 margin-top: -20px;
 font-size: 15px;
 outline: none;
 border: 1px solid rgba(0, 0, 0, 0.2);
 border-radius: 5px;
 transition: box-shadow .5s; }
 #Total .item input:focus, #Total .item_ input:focus {
 box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; }
 #Total .item.item_, #Total .item_.item_ {
 width: 60%;
 height: 30px;
 border-bottom: .5px solid #6385d1;
 border-radius: 2px;
 font-size: 15px;
 color: rgba(0, 0, 0, 0.6);
 letter-spacing: 2px;
 font-weight: lighter;
 padding-left: 10px;
 margin: 0;
 margin-left: 5%; }
 #Total #end {
 text-align: center;
 height: 50px;
 line-height: 50px;
 border-top: 1px solid rgba(0, 0, 0, 0.8);
 width: 100%;
 letter-spacing: 2px; }
 #Total #end #choose {
 margin-right: 20px; }
 #Total #end #handup {
 width: 130px;
 height: 30px;
 border: none;
 background: #6385d1;
 color: white;
 border-radius: 3px;
 margin-left: 10px; }

test.js

var userAccount = document.querySelector("#userAccount"),//获取用户名
 userPass = document.querySelector("#userPass"),//获取密码
 userPass_ = document.querySelector("#userPass_"),//获取确认密码
 userName = document.querySelector("#userName"),//获取姓名
 information = document.querySelector("#information"),//获取身份证号码
 email = document.querySelector("#email"),//获取邮箱号码
 telephone = document.querySelector("#telephone"),//获取手机号码
 items = document.querySelectorAll(".item_"),//获取所有提示文段的下标
 aCho = document.querySelector("#choose"), oBtn = document.querySelector("#handup");
var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false, test6 = false, test7 = false
 ;
userAccount.onfocus = function () {
 items[0].innerHTML = "6-30位字母、数字或'_'";
 items[0].style.color = "green";
};
userAccount.onblur = function () {
 var reg = /^\w{6,30}$/;
 if (this.value == "") {
 items[0].innerHTML = "请您务必写入用户名!";
 items[0].style.color = "red";
 } else {
 if (!reg.exec(userAccount.value)) {
 items[0].innerHTML = "6-30位字母、数字或'_'";
 items[0].style.color = "red";
 } else {
 items[0].innerHTML = "格式正确";
 items[0].style.color = "green";
 test1 = true;
 }
 }
};
//-------------------------------------------------------------账号结束;
userPass.onfocus = function () {
 items[1].innerHTML = "6-20位字母,数字或符号";
 items[1].style.color = "green";
};
userPass.onblur = function () {
 var reg = /^\w{6,20}$/;
 if (this.value == "") {
 items[1].innerHTML = "请您务必写入密码!";
 items[1].style.color = "red";
 } else {
 if (!reg.exec(userPass.value)) {
 items[1].innerHTML = "请输入6-20位字母,数字或符号";
 items[1].style.color = "red";
 } else {
 items[1].innerHTML = "格式正确";
 items[1].style.color = "green";
 test2 = true;
 }
 }
};
/*------------------------------------------------------------------密码结束*/
userPass_.onfocus = function () {
 items[2].innerHTML = "请确认两次密码相同";
 items[2].style.color = "green";
};
userPass_.onblur = function () {
 if (this.value == "") {
 items[2].innerHTML = "请务必再次确认密码";
 items[2].style.color = "red";
 } else {
 if (this.value != userPass.value) {
 items[2].innerHTML = "两次密码不相同";
 items[2].style.color = "red";
 } else {
 items[2].innerHTML = "格式正确";
 items[2].style.color = "green";
 test3 = true;
 }
 }
};
/*-----------------------------------------------------------------------确认密码结束*/
userName.onfocus = function () {
 items[3].innerHTML = "请输入您的中文名字";
 items[3].style.color = "green";
};
userName.onblur = function () {
 var reg = /^[\u4e00-\u9fa5]{2,5}$/;
 if (this.value == "") {
 items[3].innerHTML = "请务必写入您的姓名";
 items[3].style.color = "red";
 } else {
 if (!reg.exec(userName.value)) {
 items[3].innerHTML = "请输入中文名并确认是正确格式";
 items[3].style.color = "red";
 } else {
 items[3].innerHTML = "格式正确";
 items[3].style.color = "green";
 test4 = true
 }
 }
};
//---------------------------------------------------------------------------------姓名结束
information.onfocus = function () {
 items[4].innerHTML = "请输入您的身份证号码";
 items[4].style.color = "green";
};
information.onblur = function () {
 var reg = /^\d{17}[0-9x]$/;
 if (this.value == "") {
 items[4].innerHTML = "请您务必写入身份证号码!";
 items[4].style.color = "red";
 } else {
 if (!reg.exec(information.value)) {
 items[4].innerHTML = "请输入身份证号码正确格式";
 items[4].style.color = "red";
 } else {
 items[4].innerHTML = "格式正确";
 items[4].style.color = "green";
 test5 = true;
 }
 }
};
//------------------------------------------------------------------------身份证号码结束
email.onfocus = function () {
 items[5].innerHTML = "请输入您邮箱的正确格式";
 items[5].style.color = "green";
};
email.onblur = function () {
 var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
 if (this.value == "") {
 items[5].innerHTML = "请您务必写入邮箱!";
 items[5].style.color = "red";
 } else {
 if (!reg.exec(email.value)) {
 items[5].innerHTML = "请输入邮箱正确格式";
 items[5].style.color = "red";
 } else {
 items[5].innerHTML = "格式正确";
 items[5].style.color = "green";
 test6 = true;
 }
 }
};
//----------------------------------------------------------------------邮箱结束
telephone.onfocus = function () {
 items[6].innerHTML = "请输入您的手机号码";
 items[6].style.color = "green";
};
telephone.onblur = function () {
 var reg = /^\d{11}$/;
 if (this.value == "") {
 items[6].innerHTML = "请输入11位手机号码!";
 items[6].style.color = "red";
 } else {
 if (!reg.exec(telephone.value)) {
 items[6].innerHTML = "请输入11位手机号码";
 items[6].style.color = "red";
 } else {
 items[6].innerHTML = "格式正确";
 items[6].style.color = "green";
 test7 = true;
 }
 }
};
oBtn.onclick = function () {
 if (aCho.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false
 || test6 == false || test7 == false) {
 alert(" 您 的 信 息 有 误 ")
 } else {
 alert(" 登 记 成 功 ! ")
 }
};

总结

以上是小编给大家分享JS表单验证源码（带错误提示及密码等级），希望对大家有所帮助！

分享JS表单验证源码（带错误提示及密码等级）

- Author -

陈莺莺呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 #Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 #Javascript
Angular8 实现table表格表头固定效果
Jan 03 #Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 #Javascript
Vue 实现登录界面验证码功能
Jan 03 #Javascript
JS实现扫码枪扫描二维码功能
Jan 03 #Javascript
Foreign Key(1) dict(1) expdp(1) 腾讯云(1) hook(1) 云服务器(1) 数据备份(2) 脚本(1) Vite(1) 外键约束(1)
You might like
改造一台复古桌面收音机
2021/03/02 无线电
php自动跳转中英文页面
2008/07/29 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
PhpStorm 2020.3：新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python之信息加密题目详解
2019/06/26 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
2014年清明节寄语
2014/04/03 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
领导激励员工的演讲稿，各种会上用得到，建议收藏
2019/08/13 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技