Web--用户注册界面
web学习
前言
这篇文章主要介绍Web端的一个用户信息界面的编写，以及实现在本地实现信息验证的一个功能，包含少量的js和CSS，记录一下这个美好的瞬间。
最终成效
笔者初学Web，界面写的还是有点小简陋，大家能够理解其中的意思就好了。
界面代码和逻辑代码
<html>
<head>
<title>
这是一个注册表单
</title>
<script src="E:\大二下课程笔记\Wab技术\4.18上机\denglu.js"></script>
<style>
.success{
color: green;
}
.error{
color: red;
}
</style>
</head>
<body>
<h2 align="center">
用户注册信息
</h2>
<br>
<hr style color="red">
<br>
<br>
<!--下面是一个表单，用一个函数来最后确认是否信息都正确-->
<form id="myform" align="left" action="#" onsubmit="fun1()"></br></br>
用户名*： <input type="text" id="username" onblur="n1()" /> <span></span></br></br>
年龄*： <input type="number" id="agename" onblur="n2()"/> <span></span></br></br>
密码*： <input type="text" id="mima" onblur="n3()"/> <span></span></br></br>
确认密码*： <input type="text" id="confirm" onblur="n4()"/> <span></span></br></br>
电子邮件*： <input type="text" id="email" onblur="n5()"/> <span></span></br></br>
电话： <input type="number" id="phone" onblur="n6()"> <span></span></br></br>
QQ号码： <input type="text" id="QQ" onblur="n7()"> <span></span></br></br>
<input type="submit" value="提交" />
<input type="reset" value="重置">
</form>
</body>
</html>
function n1()
{
var pattern=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/
//下面这个是返回一个集合
var spans=document.querySelectorAll("span");
var user=document.getElementById("username");
if(pattern.test(user.value))
{
spans[0].className="success"
spans[0].innerHTML="正确，进行下一步"
}
else
{
spans[0].className="error"
spans[0].innerHTML="用户名不能为空或格式错误！"
}
}
function n2()
{
var spans=document.querySelectorAll("span")
var age=document.getElementById("agename")
if(age.value>17)
{
spans[1].className="success"
spans[1].innerHTML="正确"
}
else
{
spans[1].className="error"
spans[1].innerHTML="年龄不能小于17岁！"
}
}
function n3()
{
var pattern=/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/
var spans=document.querySelectorAll("span")
var mima=document.getElementById("mima")
if(pattern.test(mima.value))
{
spans[2].className="success"
spans[2].innerHTML="正确，请进行下一步"
}
else
{
spans[2].className="error"
spans[2].innerHTML="密码不能为空或格式错误！"
}
}
function n4()
{
var spans=document.querySelectorAll("span");
var mima=document.getElementById("mima")
var confirm=document.getElementById("confirm")
if(mima.value==confirm.value)
{
spans[3].className="success"
spans[3].innerHTML="正确，请进行下一步"
}
else
{
spans[3].className="error"
spans[3].innerHTML="两次密码不一致"
}
}
function n5()
{
var email=document.getElementById("email")
var spans=document.querySelectorAll("span")
var r=/@/
if(r.test(email.value))
{
spans[4].className="success"
spans[4].innerHTML="正确，请进行下一步"
}
else
{
spans[4].className="error"
spans[4].innerHTML="邮箱地址格式错误"
}
}
function n6()
{
var pattern=/^\d+$/
var spans=document.querySelectorAll("span")
var phone=document.getElementById("phone")
if(pattern.test(phone.value))
{
spans[5].className="success"
spans[5].innerHTML="正确，请进行下一步"
}
else{
spans[5].className="error"
spans[5].innerHTML="只能是数字"
}
}
function n7()
{
var pattern = /^\d+$/
var spans=document.querySelectorAll("span")
var QQ=document.getElementById("QQ")
if(pattern.test(QQ.value))
{
spans[6].className="success"
spans[6].innerHTML="正确，可以提交了"
}
else
{
spans[6].className="error"
spans[6].innerHTML="输入格式可能错误，请重新输入！"
}
}
代码讲解
onblur：这个方法可以实现，当鼠标从text框中移开的时候调用这个方法。
span标签：这个标签用于显示验证信息的，但是没有输入任何信息的时候是看不见的，挺好用的，但是有一点需要注意的是，在我的那个代码中的换行标签与span标签的位置要注意如果写反的话，那么显示的验证信息就会到下面去。
var spans=document.querySelectorAll(“span”);
这一行代码的意思是：返回一个集合，在这个文件里面按span出现的顺序排序，例如spans[0]就代表着用户名后面的验证信息。
spans[0].className=“success”
spans[0].innerHTML=“正确，进行下一步”
还有就是这两行代码的理解：上面说了spans[0]就是用户名后面的验证信息撒，我们在界面代码中我们设置了两个类，.success和.error这两个类，spans[0].className就是把样式中那个类里面写的属性给验证信息，这个应该是比较好理解的。
spans[0].innerHTML=“正确，进行下一步”
这行代码的意思为：在验证信息的位置填入信息。
注意点
1.注意提交按钮与重置按钮的type类型，
提交按钮的type必须为：submit
重置按钮的type必须为reset，否则将不起任何作用。
2.var pattern=/^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{6,10}$/ 这一行是一个正则表达式，这个的话大家没必要记忆，需要用到的时候在网上查询即可。
3.在js代码中进行数值比较的时候大多数是比较value值，比如那个age。
小结
总的来说这个不会很难，主要还是要多尝试，这个的试错成本很低的，理解代码思路，然后不懂的函数可以多查资料，这次距离上次写博客还是在上次☺，还是要通过写博客来总结一下吧。希望对大家有帮助，反正对我自己的帮助是挺大的（哈哈哈哈）。
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)