用途
最近在上信息安全的实验,用到了html+css+js,简单用这些做个表单吧!希望对你有帮助。
demo
主要技术
1.将label如姓名与输入框进行划分。这里用到了把label和输入框划分到了一个div里,并命名为form-group类,在将label命名为form-name,这样就把label和输入框区分了,再给form-name设置一个宽度就可以了。
<div class="form-group">
<label for="username" class="form-name">用户名</label>
<div>
<input type="text" id="username">
<div class="error"></div>
</div>
</div>
2.显示错误。这里用一个showError函数进行了封装,只需要输入id和错误信息,如"username"和"请输入姓名",就可以对这里div里的div进行定位(这里是把显示错误信息的框也设成了一个div,并放在了输入框的div里面),从而显示错误信息。这里只要输入框信息输入有误,就可以把错误信息显示出来了。
let error=elem.nextElementSibling;
error.innerHTML=message;
error.style.display="block";
3.隐藏错误。用户输入错误信息后,输入了正确的信息如何对信息进行隐藏呢?这里也封装了一个函数,只要检测到输入框输入了正确信息后就调用hideError这个函数,也是检测div,并把这个div的内容设置为空,并隐藏这个div。
let error=elem.nextElementSibling;
error.innerHTML="";
error.style.display="none"
4.如何确认单选框复选框有没有选中。这里封装了一个check函数,我们在找这个单选框、复选框的位置的时候用的是let genders=document.getElementsByName("gender"),根据名字来找,这样就可以找到所有的选项了。然后首先默认所有选项没有被选中,再进行遍历,看有没有选项选中。如果没有选中就显示错误信息,选中了就不显示了。
function check(elems,message){
let isChecked=false;
for(let i=0;i<elems.length;i++)
{
let elem=elems[i];
if(elem.checked){
isChecked=true;
break;
}
}
if (!isChecked){
showError(elems[elems.length-1],message);
}else {
hideError(elems[elems.length-1]);
}
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证案例</title>
<style>
*{
margin: 0;
padding: 5px;
background: rgba(250, 235, 215, 0.99);
}
#container{
border: 1px solid rgba(0, 0, 0, 0.99);
width: 300px;
/*上下100 左右自适应*/
margin: 100px auto;
}
.form-group{
margin-bottom: 20px;
display: flex;
}
#container h3{
margin: 10px;
text-align: center;
}
.form-name{
width: 120px;
/*float:4;*/
}
#container button{
margin-left: 140px;
}
.error{
color: red;
font-size: 15px;
}
</style>
</head>
<body>
<div id="container">
<h3>用户验证</h3>
<div class="form-group">
<label for="username" class="form-name">用户名</label>
<div>
<input type="text" id="username">
<div class="error"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="form-name">密码</label>
<div>
<input type="password" id="password">
<div class="error"></div>
</div>
</div>
<div class="form-group">
<label for="re-password" class="form-name">确认密码</label>
<div>
<input type="password" id="re-password">
<div class="error"></div>
</div>
</div>
<div class="form-group" class="form-name">
<label for="gender" class="form-name">性别</label>
<div>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<div class="error"></div>
</div>
</div>
<div class="form-group">
<div>
<button id="btn_submit">提交</button>
</div>
</div>
</div>
<script>
let btnSubmit=document.getElementById("btn_submit");
let username=document.getElementById("username");
let password=document.getElementById("password");
let rePassword=document.getElementById("re-password");
let genders=document.getElementsByName("gender")
btnSubmit.onclick=function (){
if(username.value.trim()==""){
showError(username,"请输入用户名");
}else {
hideError(username);
}
if((password.value.trim().length<6)&&!(password.value.trim().length==0)){
showError(password,"密码不能少于6位");
}else if(password.value.trim().length==0){
showError(password,"请输入密码");
}else {
hideError(password);
}
if(rePassword.value.trim()!=password.value.trim()){
showError(rePassword,"两次密码输入不一致");
}else {
hideError(rePassword);
}
check(genders,"请选择性别");
}
function showError(elem,message){
let error=elem.nextElementSibling;
error.innerHTML=message;
error.style.display="block";
}
function check(elems,message){
let isChecked=false;
for(let i=0;i<elems.length;i++)
{
let elem=elems[i];
if(elem.checked){
isChecked=true;
break;
}
}
if (!isChecked){
showError(elems[elems.length-1],message);
}else {
hideError(elems[elems.length-1]);
}
}
// 隐藏提示
function hideError(elem){
let error=elem.nextElementSibling;
error.innerHTML="";
error.style.display="none"
}
</script>
</body>
</html>