文章目录
为了减少服务器负载,将表单计算验证环节在客户浏览器上执行,验证完成基本的格式后,再提交给服务器进行数据处理,那么,前端如何用JS做网站登录的用户表单验证 ?
一,提出问题
制作一个表单,前三个文本框不为空,且长度不能少于 6 位,其余单选按钮,复选按钮和下拉菜单都为必选项,不能为空
二,解决思路
(1)按照正常的逻辑,先写一些html标签
(2)然后用点CSS优化下表单,让其变得好看一点
(3)写JS代码的逻辑
为了数据的严谨性,我们采用严格模式进行判断,这里我们抽取一段代码来进行判断,之后依次类推,按个复制修改下判断逻辑让判断结果为真或假后继续嵌套下去
- 通过Name值对表单输入框进行获取
//采用严格模式进行判断
"user strict"
//通过name对input框的对象
var username = document.getElementsByName("username"); //用户名
- 然后将获取的值进行逻辑比较,主要排除Value为空,长度大于 6
//用户名格式判断
if (username[0].value != "" && username[0].value != null && username[0].value.length >= 6) {
三,index.html 文件代码 (复制粘贴即可运行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
<style>
form {
position: relative;
width: 600px;
padding: 20px;
font-weight: 600;
border-radius: 14px;
box-shadow: 2px 2px 12px #3c3c3c;
background: darkgray;
margin: 5% auto;
cursor: pointer;
overflow: hidden;
transition: all 0.8s ease;
}
form:hover {
background: rgb(219, 219, 219);
}
form input,
select {
border: none;
border: 1px solid salmon;
border-radius: 2px;
}
button {
color: rgb(224, 44, 24);
width: 80px;
padding: 2px 10px;
border: none;
border: 2px solid salmon;
border-radius: 4px;
}
#displayBan {
position: absolute;
top: 100%;
right: 0;
width: 30%;
height: 100%;
border-left: 20px solid seashell;
background-color: rgb(245, 130, 117);
transition: all 0.2s ease-in;
}
#displayBan span {
display: block;
width: fit-content;
margin-top: 6%;
padding: 0 4px;
color: rgb(255, 244, 182);
text-shadow: 1px 1px rgb(141, 27, 141);
background-color: skyblue;
}
#displayBan:hover {
width: 42%;
border-left: 20px solid rgb(111, 214, 255);
}
#HT {
line-height: 36px;
text-align: center;
background-color: yellowgreen;
}
</style>
</head>
<body>
<iframe name="IFR" src="" frameborder="0" style="display: none;"></iframe>
<form target="IFR" onsubmit="return check();">
<h2 style="color: rgb(255, 255, 255);text-shadow: 2px 1px rgb(15, 178, 228);">用户注册表</h2>
<p><label>用 户 名:</label> <input type="text" name="username"></p>
<p><label>密 码:</label> <input type="password" name="password1"></p>
<p><label>确认密码:</label><input type="password" name="password2"></p>
<p><label>性别:</label>男<input type="radio" name="sex"> 女<input type="radio" name="sex" class="sex"></p>
<p><label>爱好:</label><input type="checkbox" name="favor1">摄影<input type="checkbox" name="favor2">旅游
</p>
<p><label>省份:</label>
<select name="province">
<option value="UFO" selected="selected">神秘基地</option>
<option value="Guizhou">贵州</option>
<option value="Guangxi">广西</option>
<option value="Sichuan">四川</option>
<option value="Chongqing">重庆</option>
</select>
</p>
<p><button type="submit">提交</button></p>
<div id="displayBan">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</form>
<h2 id="HT"></h2>
<script>
//采用严格模式进行判断
"user strict"
//通过name对input框的对象
var username = document.getElementsByName("username"); //用户名
var password1 = document.getElementsByName("password1"); //第一次密码
var password2 = document.getElementsByName("password2"); //第二次密码
var sex = document.getElementsByName("sex"); //性别
var favor1 = document.getElementsByName("favor1"); //爱好1
var favor2 = document.getElementsByName("favor2"); //爱好2
var province = document.getElementsByName("province"); //省份
var displayBan = document.getElementById("displayBan"); //左侧信息显示块
var displayBanSpan = displayBan.querySelectorAll("span"); //左侧信息显示条
var HT = document.getElementById("HT"); //底部验证是否通过的信息大块
function check() {
displayBan.style.top = "0px";
//保证表单提交值的顺序和安全检测的顺序,采用if...else进行判断嵌套,层层判断后再到密码判断
//针对前三个文本框进行判断
//用户名格式判断
if (username[0].value != "" && username[0].value != null && username[0].value.length >= 6) {
displayBanSpan[0].innerHTML = "用户名格式 正确 <font style=\"color:lightgreen;\">✔</font>";
//第一次密码格式判断
if (password1[0].value != "" && password1[0].value != null && password1[0].value.length >= 6) {
displayBanSpan[1].innerHTML = "第一次密码格式 正确 <font style=\"color:lightgreen;\">✔</font>";
//第二次密码格式判断
if (password2[0].value != "" && password2[0].value != null && password2[0].value.length >= 6) {
//针对后4个input框进行判断
displayBanSpan[2].innerHTML = "第二次密码格式 正确 <font style=\"color:lightgreen;\">✔</font>";
//性别格式判断
if (sex[0].checked === true || sex[1].checked === true) {
displayBanSpan[3].innerHTML = "性别必选项已选 正确 <font style=\"color:lightgreen;\">✔</font>";
//爱好是否选择判断
if (favor1[0].checked === true || favor2[0].checked === true) {
displayBanSpan[4].innerHTML = "爱好必选项已选 正确 <font style=\"color:lightgreen;\">✔</font>";
//省份是否选择判断
if (province[0].value !== "" && !province[0].value !== null) {
displayBanSpan[5].innerHTML =
"省份必选项已选 正确 <font style=\"color:lightgreen;\">✔</font>";
displayBanSpan[6].innerHTML = "☆ 表单已经完成填报 ☆";
//判断密码是否相等,密码相等就让token为true,为后面触发底部信息显示通过做铺垫
var token = (parseInt(password1[0].value) === parseInt(password2[0].value)) ? true :
false;
// 密码是否通过触发底部信息提示
if (token) {
document.body.style.backgroundColor =
"#000";
HT.innerHTML = "欢迎您,验证通过!已成功注册 <font style=\"color:lightgreen;\">✔</font>";
} else {
HT.innerHTML = "非常抱歉,密码错误!请重新输入 <font style=\"color:red;\"> !</font>";
}
} else {
displayBanSpan[5].innerHTML = "省份选项为必选项,请选择<font style=\"color:red;\"> !</font>";
}
} else {
displayBanSpan[4].innerHTML = "爱好选项为必选项,请选择<font style=\"color:red;\"> !</font>";
}
} else {
displayBanSpan[3].innerHTML = "性别选项为必选项,请选择<font style=\"color:red;\"> !</font>";
}
} else {
displayBanSpan[2].innerHTML =
"第二次输入密码不符合要求,请输入密码不为空且长度不小于6 <font style=\"color:red;\"> !</font>";
}
} else {
displayBanSpan[1].innerHTML = "第一次输入密码不符合要求,请输入密码不为空且长度不小于6 <font style=\"color:red;\"> !</font>";
}
} else {
displayBanSpan[0].innerHTML = "输入的用户名不符合要求,请输入用户名不为空且长度不小于6 <font style=\"color:red;\"> !</font>";
}
}
</script>
</body>
</html>
四,最终效果演示
当用户输入值错误的时候,表单进行格式错误提示
当用户输入值正确的时候,表单信息格式全部合格,且密码正确,验证通过