JavaScript实现用户注册界面验证功能
作者：异步漫步时间：2026-10-24 16:07:43浏览：330
本文提供了一套完整的JavaScript用户注册界面实现方案，涵盖CSS样式布局、HTML表单结构及JS核心验证逻辑。通过原生JS监听提交事件，实时校验账号、密码、邮箱等字段格式，并动态显示错误提示，帮助开发者快速构建具备基础验证功能的注册页面。
JS实现用户注册界面验证功能
本文详细介绍如何利用JavaScript实现一个具备完整验证功能的用户注册界面，提供可直接参考的代码实现，供开发者学习与实践。
CSS样式定义
首先定义CSS样式代码，用于构建注册界面的视觉布局与交互效果。
*{
margin: 0;
padding: 0;
}
.block{
position: relative;
margin: 0 auto;
margin-top: 80px;
width: 710px;
height: 500px;
border: 1px solid rgba(29, 29, 29, 0.64);
background: url("./img/logo2396.jpg")no-repeat;
background-size: 100%;
}
.photo {
position: absolute;
z-index: 1;
width: 710px;
height: 500px;
background-color: rgba(0, 0, 0, 0.71);
}
.biao{
margin-top: 20px;
position: absolute;
z-index: 2;
margin-left: 150px;
}
li{
position: relative;
padding-left:20px ;
list-style: none;
line-height: 70px;
width: 400px;
border: 1px solid white;
margin:5px auto;
}
li input[type=text]{
padding-left: 20px;
border-style: none;
background: none;
}
input[type=submit]{
margin-left: 150px;
border-style: none;
font-size: 25px;
color: white;
background: none;
}
.d{
background-color: rgba(222, 53, 3, 0.71);
}
.txt{
line-height: 50px;
width: 280px;
font-size: 15px;
color: white;
}
.error {
position: absolute;
z-index: 2;
left: 150px;
color: rgba(253, 253, 253, 0.4);
font-size: 14px;
}HTML表单结构
接着编写HTML代码，搭建注册表单的基础结构，包含账号、密码、确认密码及邮箱等输入字段。
<div class="block">
<div class="photo"></div>
<div class="biao">
<form name="form">
<ul>
<li><label style="color: white">账 号：</label><input class="txt" type="text"></li>
<li><label style="color: white">密 码：</label><input class="txt" type="text"></li>
<li><label style="color: white">确认密码：</label><input class="txt" type="text"></li>
<li><label style="color: white">电话号码：</label><input class="txt" type="text"></li>
<li><label style="color: white">邮 箱：</label><input class="txt" type="text"></li>
<li class="d"><input id="sub" type="submit" value="注册"></li>
</ul>
</form>
</div>
</div>JavaScript验证逻辑
最后通过JavaScript代码实现核心验证逻辑，包括表单提交拦截、字段格式校验及错误提示的动态显示。
var sub=document.getElementById("sub");
var txt=document.getElementsByClassName("txt");
var li=document.getElementsByTagName("li");
document.forms.form.onsubmit=function(){
yan();
var errl=document.getElementsByClassName("error").length;
if(!errl){
return true;
}
return false;
};
function yan(){
for(var i=0;i<txt.length;i++){
txt[i].focus();
}
sub.focus();
}
for(var i=0;i<txt.length;i++)
{
txt[i].index=i;
txt[i].onfocus=function (){
if(this.parentElement.children[2]==undefined) return;
this.parentElement.children[2].remove();
};
txt[i].onblur=function (){
switch (this.index){
case 0:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="请输入账号";
s.className="error";
li[this.index].appendChild(s)
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 1:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="请输入密码";
s.className="error";
li[this.index].appendChild(s)
}
else if(this.value.length<6||this.value.length>11) {
var s=document.createElement("span");
s.innerHTML="密码错误";
s.className="error";
li[this.index].appendChild(s);
txt[this.index].value="";
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 2:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="请再次确认密码";
s.className="error";
li[this.index].appendChild(s);
txt[this.index].value="";
}
else if(this.value!=txt[1].value){
var s=document.createElement("span");
s.innerHTML="请重新输入";
s.className="error";
li[this.index].appendChild(s);
txt[this.index].value="";
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 3:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="请输入号码";
s.className="error";
li[this.index].appendChild(s)
}
else if(this.value.length!=11){
var s=document.createElement("span");
s.innerHTML="号码格式错误";
s.className="error";
li[this.index].appendChild(s)
txt[this.index].value="";
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
case 4:
if(this.value==""){
var s=document.createElement("span");
s.innerHTML="请输入邮箱";
s.className="error";
li[this.index].appendChild(s)
}
else{
var s=document.createElement("span");
s.innerHTML="";
s.className="sucess";
li[this.index].appendChild(s)
}
break;
}
}
}以上即为利用JavaScript实现用户注册界面功能的完整代码示例，希望能为相关学习提供有益帮助，欢迎继续支持本站获取更多技术资源。
作者最新文章
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
JS对象数组转字符串为什么推荐用JSON.stringify()
2026-11-05 09:40:31