华山资源网

分享JS表单验证源码（带错误提示及密码等级）
网络编程 2024/12/24 佚名
3 1

先晒图

分享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="/UploadFiles/2021-04-02/logo.png">


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="/UploadFiles/2021-04-02/test.js">




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})"") {
 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表单验证源码（带错误提示及密码等级），希望对大家有所帮助！
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com