JavaScript表单小Demo_js表单请求demo-优快云博客

本文介绍了一个基于HTML和JavaScript的表单验证系统，详细解释了如何使用JavaScript监听表单元素的事件，如获取焦点、输入内容和失去焦点，以实时检查用户输入的数据是否符合预设的规则。此外，文章还分享了一种生成随机验证码的方法，并将其应用于表单验证过程中。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>
    <!-- 表单提交 -->
    <form action="./Demo.html">
        注册账号 : <input type="text" maxlength="16"> <span></span> <br>
        注册密码 : <input type="password"  maxlength="16"> <span></span> <br>
        确认密码 : <input type="password"  maxlength="16"> <span></span> <br>
        验 证 码 &nbsp;: <input type="text"  maxlength="6"> <span></span> <br>
        <span></span> <button type="button">看不清楚</button><br>
        <button>提交</button>
    </form>

    <script>
        var userName = document.querySelectorAll('input')[0];
        var userPwd1 = document.querySelectorAll('input')[1];
        var userPwd2 = document.querySelectorAll('input')[2];
        var userVc = document.querySelectorAll('input')[3];

        var spanName = document.querySelectorAll('span')[0];
        var spanPwd1 = document.querySelectorAll('span')[1];
        var spanPwd2 = document.querySelectorAll('span')[2];
        var spanVc = document.querySelectorAll('span')[3];
        var oVc = document.querySelectorAll('span')[4];

        var oBtn = document.querySelectorAll('button')[0];
        var oSub = document.querySelectorAll('button')[1];

        var oForm = document.querySelector('form');

        var str = '0123456789abcdefghijklmnopqrstuvwxyzABCEDEFGHIJKLMNOPQRSTUVWXYZ';

        // 定义验证码
        oVc.innerHTML = setVc(str);
        oBtn.onclick = function(){
            oVc.innerHTML = setVc(str);
        }

        // 获取焦点
        userName.onfocus = function(){
            spanName.innerHTML = '输入8-16位账号';
            spanName.style.color = 'black';
        }

        // 输入内容时
        userName.oninput = function(){
            if(userName.value.length < 8){
                spanName.innerHTML = `您输入了${userName.value.length}位数值,至少输入8位,您还必须输入${8-userName.value.length}位`;
                spanName.style.color = 'red';
            }else if( userName.value.length >= 8 && userName.value.length <= 16  ){
                spanName.innerHTML = `您输入了${userName.value.length}位数值,符合规范`;
                spanName.style.color = 'black';
            }
        }

        // 失去焦点时
        userName.onchange = function(){
            if(userName.value.length < 8){
                spanName.innerHTML = `您输入了${userName.value.length}位数值,至少输入8位,现在输入的不符合规范,您还必须输入${8-userName.value.length}位`;
                spanName.style.color = 'red';
            }else if( userName.value.length >= 8 && userName.value.length <= 16  ){
                spanName.innerHTML = `您输入了${userName.value.length}位数值,符合规范,是OK的`;
                spanName.style.color = 'black';
            }
        }

        // 获取焦点
        userPwd1.onfocus = function(){
            spanPwd1.innerHTML = '输入8-16位密码';
            spanPwd1.style.color = 'black';
        }

        // 输入内容时
        userPwd1.oninput = function(){
            if(userPwd1.value.length < 8){
                spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,至少输入8位,您还必须输入${8-userPwd1.value.length}位`;
                spanPwd1.style.color = 'red';
            }else if( userPwd1.value.length >= 8 && userPwd1.value.length <= 16  ){
                spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,符合规范`;
                spanPwd1.style.color = 'black';
            }
        }

        // 失去焦点时
        userPwd1.onchange = function(){
            if(userPwd1.value.length < 8){
                spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,至少输入8位,现在输入的不符合规范,您还必须输入${8-userName.value.length}位`;
                spanPwd1.style.color = 'red';
            }else if( userPwd1.value.length >= 8 && userPwd1.value.length <= 16  ){
                spanPwd1.innerHTML = `您输入了${userPwd1.value.length}位数值,符合规范,是OK的`;
                spanPwd1.style.color = 'black';
            }
        }

        // 获取焦点
        userPwd2.onfocus = function(){
            spanPwd2.innerHTML = '请您输入确认密码,必须与注册密码一致';
            spanPwd2.style.color = 'black';
        }

        // 输入内容
        userPwd2.oninput = function(){
            if( userPwd1.value === userPwd2.value ){
                spanPwd2.innerHTML = '请您输入的确认密码与注册密码相同';
                spanPwd2.style.color = 'black';
            }else{
                spanPwd2.innerHTML = '请您输入的确认密码与注册密码不相同';
                spanPwd2.style.color = 'red';
            }  
        }

        // 失去焦点
        userPwd2.onchange = function(){
            if( userPwd1.value === userPwd2.value ){
                spanPwd2.innerHTML = '请您输入的确认密码与注册密码相同!!!!';
                spanPwd2.style.color = 'black';
            }else{
                spanPwd2.innerHTML = '请您输入的确认密码与注册密码不相同!!!!';
                spanPwd2.style.color = 'red';
            }  
        }

        // 获取焦点
        userVc.onfocus = function(){
            spanVc.innerHTML = '请您输入6位验证码';
            spanVc.style.color = 'black';
        }

        // 输入内容
        userVc.oninput = function(){
            if(userVc.value.length < 6){
                spanVc.innerHTML = `您输入了${userVc.value.length}位数值,必须输入6位,您还必须输入${6-userVc.value.length}位`;
                spanVc.style.color = 'red';
            }else if(userVc.value.length == 6){
                spanVc.innerHTML = `您输入了${userVc.value.length}位数值,符合规范`;
                spanVc.style.color = 'black';
            }
        }


        // 点击提交对所有的数据进行验证，将所有的验证都写在一个提交事件中，给form标签添加提交事件

        oForm.onsubmit = function(e){
            // 获取事件对象
            e = e || window.event;

            // 非空判断,输入内容不能是空
            if(userName.value == ''){
                spanName.innerHTML = '账号不能为空';
                spanName.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }else if(userName.value.length < 8){
                spanName.innerHTML = '账号长度少于8位,请继续输入';
                spanName.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }


            if(userPwd1.value == ''){
                spanPwd1.innerHTML = '密码不能为空';
                spanPwd1.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }else if(userPwd1.value.length < 8){
                spanPwd1.innerHTML = '密码长度小于8位';
                spanPwd1.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }


            if(userPwd2.value == ''){
                spanPwd2.innerHTML = '确认密码不能为空';
                spanPwd2.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }else if(userPwd2.value.length < 8){
                spanPwd2.innerHTML = '确认密码长度小于8位';
                spanPwd2.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }


            if(userVc.value == ''){
                spanVc.innerHTML = '验证码不能为空';
                spanVc.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }else if(userVc.value.length < 6){
                spanVc.innerHTML = '验证码长度小于6位';
                spanVc.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }

            // 输入内容要符合规范，长度符合要求
            // 方法①单独再写独立的if判断
            // if( !(userName.value.length >= 8 && userName.value.length <= 16)){
            //     spanName.innerHTML = '账号长度不符合规范';
            //     spanName.style.color = 'orange';
            //     // 阻止默认提交效果的执行
            //     e.preventDefault();
            //     return;
            // }

            // 方法②继续在非空判断之后写

            
            // 判断密码和确认密码必须一致，如果不同不能提交
            if(userPwd1.value !== userPwd2.value){ 
                spanPwd2.innerHTML = '确认密码与密码不同';
                spanPwd2.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }


            // 验证码的判断，输入的内容必须与span中写入的内容相同
            // userVc.value  验证码 input 标签,输入的内容
            // oVc.innerText 验证码 span 标签,写入的内容

            // 如果不需要区分大小写
            // 将字符串内容,统一为都是大写,或者都是小写
            // 字符串.toUpperCase()  大写
            // 字符串.toLowerCase()  小写

            // 都统一为小写字符，就不区分小写了
            // console.log(oVc.innerText)  // 就是字
            // console.log(oVc.innerHTML)  // 有标签的

            if(userVc.value.toLocaleLowerCase() !== oVc.innerText.toLocaleLowerCase() ){
                spanVc.innerHTML = '验证码不正确,请重新输入';
                spanVc.style.color = 'orange';
                // 阻止默认提交效果的执行
                e.preventDefault();
                return;
            }
        }

        // 定义生成随机验证码的函数
        function setVc(str){
            var vc = '';
            while(vc.length < 6){
                var num = parseInt(Math.random() * str.length);
                if(vc.indexOf( str[num] ) === -1 ){
                    vc += str[num];
                }
            }
            return `<b>${vc}</b>`;
        }
    </script>
</body>
</html>
在这里插入图片描述