版权声明：转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/86670844
上次的正则版表单验证的主要用意是为了正则表达式的应用，而这次的表单验证提供的更加完善的用户体验（实时判断了用户的输入数据正确与否），它是上个版本的延伸。
实现效果：
相应代码：
<!DOCTYPE html>
<html lang="en">
<!-- 此表单虽然样式比较简单，但功能实现还是比较复杂的，不同于一般的一步性验证而是将分步验证和最终验证结合在一起
实现了在输入不同的数据时对数据的实时判断 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单验证</title>
<link rel="stylesheet" href="./css/iconfont.css">
<!-- 字体图标的引入 -->
<style>
/* css样式 和之前的正则版表单验证一样，实际上这个是先前写的*/
#formuser{
display: block;
margin: 0 auto;
width: 400px;
}
.form_user>li{
position: relative;
list-style: none;
height: 50px;
width: 400px;
border: 1px solid gray;
border-radius: 5px;
margin: 40px 0;
}
.form_user>li>input{
width: 378px;
height: 48px;
border-style: none;
outline: none;
margin-left: 1px;
padding-left: 20px;
color: black;
font-size: 20px;
}
.tel{
position: relative;
border-style: none !important;
}
.usertelnum{
width: 150px;
height: 50px;
border: 1px solid grey;
border-radius: 5px;
line-height: 50px;
position: relative;
float: left;
}
.usertelnum>input{
position: absolute;
border-style: none;
outline: none;
top: 0px;
left: 1px;
width: 120px;
height: 48px;
padding-left: 20px;
font-size: 20px;
}
#icon{
position: absolute;
top: 0;
right: 10px;
color: gray;
}
.show_phone{
float: right;
width: 210px !important;
height: 50px !important;
border-radius: 5px;
border: 1px solid silver !important;
font-size: 20px;
padding-left: 20px;
outline: none;
border-style: solid;
}
.phone_name{
display: none;
position: absolute;
border-radius: 5px;
z-index: 9;
top: 52px;
width: 398px;
height: 250px;
border: 1px solid silver;
background-color: white;
overflow-y: scroll;
}
.phone_name>ul{
margin: 0%;
padding: 0%;
}
.phone_name li{
list-style: none;
height: 40px;
line-height: 40px;
padding-left: 20px;
font-size: 20px;
color: black;
}
.phone_name li:hover{
background-color: #e4e4e4;
}
.sub_btn{
background-color: #2e7fff;
}
.sub_btn>input{
width:400px;
height: 50px;
outline: none;
border-style: none;
background-color: transparent;
color: white;
font-size: 22px;
}
.sub_btn:hover{
background-color: #83aae9;
}
.telerror{
clear: left;
display: inline-block;
font-size: 14px;
color: gray;
position: relative;
top: 5px;
}
.emailshow{
display: block;
font-size: 14px;
color: gray !important;
position: absolute;
top: 53px;
}
.error {
font-size: 14px;
color: red;
position: absolute;
top: 53px;
left: 0;
background-image: url("./img/[email protected]");
background-repeat: no-repeat;
background-size: 20px;
padding-left: 25px;
}
.success {
display: none;
position: absolute;
top: 15px;
right: 10px;
}
</style>
</head>
<body>
<form id="formuser" action="" method="get" onsubmit="">
<!-- get方式提交 -->
<ul class="form_user">
<li class="litxt">
<input type="text" class="userData" name="email" placeholder="邮箱" value="" />
<span class="emailshow">请输入你的常用邮箱(非qq/foxmail邮箱)</span>
<img class="success" src="./img/tick.png" alt="" />
</li>
<li class="litxt">
<input type="text" class="userData" name="nickname" placeholder="昵称" value="" />
<img class="success" src="./img/tick.png" alt="" />
</li>
<li class="litxt">
<input type="text" class="userData" name="password" placeholder="密码" value="" />
<img class="success" src="./img/tick.png" alt="" />
</li>
<li class="tel">
<div class="usertelnum">
<input id="telnum" type="text" value="+86">
<i id="icon" class="iconfont">󰆦</i>
</div>
<input type="text" class="show_phone" placeholder="手机号码">
<div class="phone_name">
<ul>
<li>中国 +86</li>
<li>中国香港特别行政区 +852</li>
<li>中国澳门特别行政区 +853</li>
<li>中国台湾地区 +886</li>
<li>阿尔巴尼亚 +355</li>
<li>阿尔及利亚 +213</li>
<li>阿富汗 +93</li>
<li>阿根廷 +54</li>
<li>爱尔兰 +353</li>
<li>埃及 +20</li>
<li>埃塞俄比亚 +251</li>
</ul>
</div>
<span class="telerror">可以通过该手机号找回密码</span>
</li>
<li class="sub_btn">
<input type="submit" value="立即注册" />
</li>
</ul>
</form>
<script>
// 获取所需要的dom元素
var litxt = document.getElementsByClassName('litxt');
var emailshow = document.getElementsByClassName('emailshow')[0];
var phone_name = document.getElementsByClassName('phone_name')[0];
var formuser = document.getElementById('formuser');
var telnum = document.getElementById('telnum');
var txt = document.getElementsByClassName('userData');
var success = document.getElementsByClassName('success');
var nameinfo = ["邮箱", "昵称", "密码"];//可以动态的更改不同提示时的显示
window.onload = addEvent();// 由于js写在所有的元素后面，所以可以不写这句话
function addEvent() {
for (var i = 0; i < litxt.length; i++) {
txt[i].index = i;//由于i值在循环结束后为固定值，所以取出它的索引值
txt[i].onfocus = function () {//鼠标获焦事件，如果获焦后，将之前下方对的提示性文字隐藏，文本框变色
// 且将对应显示出的错误警告删除，也就是错误警告是动态创建和删除的
emailshow.style.display = 'none';
this.parentNode.style.borderColor = "#2e7fff";
if (this.parentNode.lastChild.nodeName.toLowerCase() == "span" && this.parentNode.lastChild.className ==
"error") {
this.parentNode.lastChild.remove();
}
}
txt[i].onblur = function () {//判断文本框是否为空、各文本框的数据是否符合规则，用的是逻辑判断
this.parentNode.style.borderColor = "silver";
if (this.value == '') {
var span = document.createElement('span');
span.className = 'error';
span.innerHTML = nameinfo[this.index] + '不能为空！'
this.parentNode.appendChild(span);
this.parentNode.style.borderColor = 'red';
} else {
if (this.index == 0) { //邮箱
if (litxt[this.index].children[0].value.indexOf("@") != -1 && litxt[this.index].children[
0].value.indexOf("@") + 1 != litxt[this.index].children[0].value.length) {
success[this.index].style.display = 'block';//下同，显示出验证成功的对号
} else {
var span = document.createElement('span');
span.className = 'error';
span.innerHTML = nameinfo[this.index] + '格式不正确！'
this.parentNode.appendChild(span);
}
}
if (this.index == 1) {//昵称
success[this.index].style.display = 'block';
}
if (this.index == 2) {//密码
if (litxt[this.index].children[0].value.length >= 6 && litxt[this.index].children[0].value
.length <= 8) {
if (!isNaN(litxt[this.index].children[0].value)) {
var span = document.createElement('span');
span.className = 'error';
span.innerHTML = nameinfo[this.index] + '必须有字母或符号！'
this.parentNode.appendChild(span);
} else {
success[this.index].style.display = 'block';
}
} else {
var span = document.createElement('span');
span.className = 'error';
span.innerHTML = nameinfo[this.index] + '长度必须在6~8位之间'
this.parentNode.appendChild(span);
}
}
}
}
}
}
telnum.onclick = function () {
phone_name.style.display = 'block';
}
telnum.onblur = function () {
phone_name.style.display = 'none';
}
formuser.onsubmit = function () {
if (submethods()) {//判断是否有报错，没有的话提交表单
event.preventDefault();//阻止元素发生默认的行为
event.stopPropagation();//阻止事件的冒泡
}
addEvent();
}
function submethods() {//创建错误提示的span元素，计算报错的数量并返回
emailshow.style.display = 'none';
for (var i = 0; i < litxt.length; i++) {
if (litxt[i].children[0].value == '') {
var span = document.createElement('span');
span.className = 'error';
span.innerHTML = nameinfo[i] + '不能为空！'
litxt[i].appendChild(span);
litxt[i].style.borderColor = 'red';
}
}
var length = document.getElementsByClassName('error').length;
return length;
}
</script>
</body>
</html>有些方法是第一次用，表述可能有些问题，欢迎留言。