js和html实现简单的表单验证和多选框

最新推荐文章于 2024-03-29 10:14:26 发布

Smile-well

最新推荐文章于 2024-03-29 10:14:26 发布

阅读量990

点赞数 1

分类专栏： JavaScript笔记文章标签： js html

本文链接：https://blog.csdn.net/weixin_43133548/article/details/109330619

版权

JavaScript笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这两天看了一部分前端的技术，自己动手写了一个表单验证登录的代码，然后再看了视频教程，在自己的基础上加以改进,编译器是vscode加上一些插件

表单验证

检测到错误

表单验证实现：

用户名不能为空且只能由字母和数字组成，长度在6~14之间
用户名不合法将会在输入框后提示
密码大于8位，还有确认密码一栏判断密码是否一致，不一致将会提示
邮箱不合法在后面提示
当信息不正确的时候，再次点击会自动清空错误的信息并将提示信息清空
只有当全部的信息正确才可以提交信息

form.html

这里把表单放在table里面，是为了看起来整齐一些

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script type="text/javascript" src="/js/form.js"></script>
       <form id="userForm" method="post">
           <table>
               <tr>
                   <td>用户名：</td>
                   <td><input id="username" type="text" name="username"/></td>
                   <td><span id="userNameError" style="color:red; font-size: 12px;"></span></td>
               </tr>
               <tr>
                   <td>密码：</td>
                   <td><input id="psw" type="password" name="password"/></td>
                   <td><span id="pswError" style="color:red; font-size: 12px;"></span></td>
               </tr>   
               <tr>
                   <td>确认密码：</td>
                   <td><input id="repsw" type="password"/></td>
                   <td><span id="rePswError" style="color:red; font-size: 12px;"></span></td>
               </tr> 
               <tr>
                   <td>邮箱：</td>
                   <td><input id="email" type="email" name="email"/></td>
                   <td><span id="emailError" style="color:red; font-size: 12px;"></span></td>
               </tr> 
               <tr>
                   <td colspan="2" align="center">
                       <input type="button" value="注册" id="submitBtn">
                       &nbsp;&nbsp;&nbsp;&nbsp;
                       <input type="reset" value="清空" id="reset">
                   </td>
               </tr>
       </table>
   </form>
</body>
</html>

form.js

//当界面加载完成时执行
window.onload = function(){
	//获取前端的username对象
    var userNameObj = document.getElementById("username");
    //获取userNameError的span对象
    var userNameErrorObj = document.getElementById("userNameError");
    //正则表达式判断用户名是否正确
    var userNameRegExp = /^[A-Za-z0-9]+$/;
	
	//获取pwd对象和pswError的span对象
    var pswObj = document.getElementById("psw");
    var pswErrorObj = document.getElementById("pswError");

	//获取repsw对象和rePswError的span对象
    var repswObj = document.getElementById("repsw");
    var rePswErrorObj = document.getElementById("rePswError");
	
	//获取email对象和emailError的span对象
    var emailObj = document.getElementById("email");
    var emialErrorObj = document.getElementById("emailError");
    //正则表达式判断邮箱格式是否正确
    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

	//获取按钮元素
    var submitObj = document.getElementById("submitBtn");
    
    //当时去焦点时（即当用户输入完成后会自动判断是否正确，不正确进行提醒）
    userNameObj.onblur = function(){
    	//获取用户输入的值并用trim函数去除输入值前后的空格
        var username = userNameObj.value;
        username = username.trim();

		//这里用字符长度判断是否为空（也可以用username==""来判断，方法挺多的）
        if(username.length == 0){
            userNameErrorObj.innerText = "用户名不能为空！";
        }else{//当不为空串的时候
        	//这里也是长度判断
            if(username.length>14 || username.length < 6){
                userNameErrorObj.innerText="用户名长度应在6~14之间！";
            }else if(!userNameRegExp.test(username)){
            	//正则表达式判断
                userNameErrorObj.innerText="非法字符，用户名只能由字母和数字组成";
            }else{//程序执行到这里说明没有问题，不进行提示
                userNameErrorObj.innerText="";
            }
        }
    }
	
	//当出现错误提示时，用户鼠标点击之后自动清空错误信息和提示信息
    userNameObj.onfocus = function(){
        if(userNameErrorObj.innerText!=""){
            userNameObj.value = "";
        }
        userNameErrorObj.innerText="";
    }

    pswObj.onblur = function(){
        var psw = pswObj.value;
        psw = psw.trim();
        if(psw.length < 8){
            pswErrorObj.innerText = "密码长度应大于8";
        }
    }

    pswObj.onfocus = function(){
        var psw = pswObj.value;
        psw = psw.trim();
        if(pswErrorObj.innerText!=""){
            pswObj.value = "";
        }
        pswErrorObj.innerText="";
    }


    repswObj.onblur = function(){
        var repsw = repswObj.value;
        repsw = repsw.trim();

        var psw = pswObj.value;
        psw = psw.trim();

        if(repsw != psw){
            rePswErrorObj.innerText = "密码不一致，请重新输入！";
        }
    }

    repswObj.onfocus = function(){
        if(rePswErrorObj.innerText!=""){
            repswObj.value = "";
        }
        rePswErrorObj.innerText = "";
    }

    emailObj.onblur = function(){
        var email = emailObj.value;
        email = email.trim();

        if(!emailRegExp.test(email)){
            emialErrorObj.innerText = "邮箱地址不合法，请重新输入！";
        }
    }

    emailObj.onfocus = function(){
        if(emialErrorObj.innerText!=""){
            emailObj.value = "";
        }
        emialErrorObj.innerText = "";
    }

	//当点击按钮的时候触发函数，进行信息判断，如果全部正确则提交
    submitObj.onclick = function(){
    	//这里设置提交时判断，避免用户不输入直接点击提交而误触发提交
        userNameObj.focus();
        pswObj.focus();
        rePswNameObj.focus();
        emailObj.focus();

        userNameObj.blur();
        pswObj.blur();
        rePswNameObj.blur();
        emailObj.blur();
        //当没有错误的信息，提交表单
        if(userNameErrorObj.innerText=="" && pswErrorObj.innerText=="" && rePswErrorObj.innerText=="" && emialErrorObj.innerText==""){
            var userFormObj = document.getElementById("userForm");
            userFormObj.action = "http://localhost:8080";
            userFormObj.submit();
        }
    }
}

这个验证还是比较基础的功能，可以在这上面进行升级的，这里只是作为学习，暂时不往深处去改进

多选框

在这里插入图片描述

多选框实现：

当点击全选时，下面的按钮全勾选上
当取消全选时，下面的框全取消

allSelect.js

window.onload = function(){
	//获取全选框对象
    var firstCheckBoxObj = document.getElementById("firstCheckBox");
    //当全选框选中时触发函数
    firstCheckBoxObj.onclick = function(){
    	//接收全选框下面的checkBox，并存在positions数组里（这里用获取name的方式获取CheckBox对象）
        var positions = document.getElementsByName("position");
        //当全选框被选中时，会有一个checked函数触发，将多选框的状态变为选中
        //当需要全选时，只需要用循环将其他的CheckBox的状态都改为选中即可
        //不需要全选时，将多选框取消选中，再用循环给每一个CheckBox的状态都改为和多选框一样
        //这样就实现了全选的功能
        for(var i=0;i<positions.length;i++){
            positions[i].checked = firstCheckBoxObj.checked;
        }
    }
}

allSelect.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="/js/allSelect.js"></script>
    <input id="firstCheckBox" type="checkbox">全选<br>
    <input id="checkBox1" name="position" type="checkbox" value="shangdan">上单<br>
    <input id="checkBox2" name="position" type="checkbox" value="zhongdan">中单<br>
    <input id="checkBox3" name="position" type="checkbox" value="daye">打野<br>
    <input id="checkBox4" name="position" type="checkbox" value="fuzhu">辅助<br>
    <input id="checkBox5" name="position" type="checkbox" value="ad">ad<br>
</body>
</html>