JavaScript练习：表单校验-优快云博客

本文介绍了一个具体的表单验证实现案例，包括使用HTML和JavaScript完成表单的输入验证过程。涉及实时反馈用户输入的有效性，以及如何在提交时验证整个表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果
校验规则：
- 每个英文字母、数字、英文符号长度为1
- 每个汉字，中文符号长度为2
- 表单获得焦点时，下方显示表单填写规则
- 表单失去焦点时校验表单内容
- 校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
- 校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
- 点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”

<!DOCTYPE html>
<html>

<head>
    <title>表单校验</title>
    <meta charset="UTF-8">
    <style type="text/css">
    * {
        font-family: '微软雅黑';
    }
    
    section {
        
        text-align: center;
        padding: 10px;
        margin: 10px;
        position: relative;
        height: 2em;
    }
    
    section label{
        position: absolute;
        right: 60%;
        top: 5px;
    }
    
    section input {
        width:200px;
        border:2px solid #666;
        border-radius: 5px;
        position: absolute;
        left: 43%;
        top: 5px;
        width: 250px;
    }
    section input:focus{
        border:2px solid lightblue;
        outline: none;
    }
    section span {
        position: absolute;
        left: 43%;
        bottom: 5px;
        font-size: 12px;
        color: gray;
        visibility: hidden;
    }
    
    input[type='button'] {
        width:250px;
        height:30px;
        background-color: rgb(47, 121, 186);
        border: none;
        border-radius: 5px;
        color: white;
        outline: none;
    }
    input[type='button']:hover{
        background-color: rgb(90, 144, 190);
    }
    </style>
</head>

<body>
    <form>
        <section>
            <label for="text">名称</label>
            <input type="text" id="name">
           
            <span>必填，长度为4-16个字符</span>
        </section>
        <section>
            <label for="password">密码</label>
            <input type="password" id="password">
           
            <span>6到16位数字和字母的组合</span>
        </section>
        <section>
            <label for="password">确认密码</label>
            <input type="password" id="confirm_password">
           
            <span>重复输入密码</span>
        </section>
        <section>
            <label for="text">邮箱</label>
            <input type="text" id="email">
           
            <span>example@123.com</span>
        </section>
        <section>
            <label for="text">手机</label>
            <input type="text" id="tel">
           
            <span>请输入11位手机号码</span>
        </section>
        <section>
            <input type="button" value="提交" id="check">
        </section>
    </form>
    <script type="text/javascript">
    $ = function(el) {
        return document.querySelector(el);
    }
    $$ = function(el) {
        return document.querySelectorAll(el);
    }
    var checkResult = {
        right: false,
        tip: ''
    }
    var inputEles = [$('#name'), $('#password'), $('#confirm_password'), $('#email'), $('#tel')];
    var originTip = ['必填，长度为4-16个字符', '6到16位数字和字母的组合', '重复输入密码', 'example@123.com', '请输入11位手机号码'];
    function checkValue(ele) {
        var str = ele.value.trim();//trim() 方法会从一个字符串的两端删除空白字符,并不影响原字符串本身，它返回的是一个新的字符串。
        if (str.length === 0) {
            checkResult.right = false;
            checkResult.tip = '输入不能为空';
            return;
        }
        // 名称
        if (ele === inputEles[0]) {
            var len = str.replace(new RegExp('[^\x00-\xff]', 'g'), 'aa').length;
            if (len >= 4 && len <= 16) {
                checkResult.right = true;
                checkResult.tip = '名称可用';
            } else if(len<4){
                checkResult.right = false;
                checkResult.tip = '名称过短！';
            }else{
                checkResult.right = false;
                checkResult.tip = '名称过长！';
            }
        }
        if (ele === inputEles[1]) {
            if (str.match(/^[a-zA-Z0-9]{6,16}$/)) {
                checkResult.right = true;
                checkResult.tip = '密码格式正确';
            } else {
                checkResult.right = false;
                checkResult.tip = '请输入6到16位字符且只能为数字和字母';
            }
        }
        if (ele === inputEles[2]) {
            if (str === inputEles[1].value.trim()) {
                checkResult.right = true;
                checkResult.tip = '密码正确';
            } else {
                checkResult.right = false;
                checkResult.tip = '两次密码输入要相同';
            }
        }
        if (ele === inputEles[3]) {
            var reg = new RegExp('^([a-zA-Z0-9_\.\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$', 'i');
            if (str.match(reg)) {
                checkResult.right = true;
                checkResult.tip = '邮箱可用';
            } else {
                checkResult.right = false;
                checkResult.tip = '邮箱格式错误';
            }
        }
        if (ele === inputEles[4]) {
            if (str.match(/^1\d{10}$/)) {
                checkResult.right = true;
                checkResult.tip = '号码可用';
            } else {
                checkResult.right = false;
                checkResult.tip = '号码格式错误';
            }
        }
    }
    for (var i = 0; i < inputEles.length; i++) {
        inputEles[i].addEventListener('blur', function(e) {
            checkValue(e.target);
            var span = e.target.parentElement.getElementsByTagName('span')[0];
            span.innerHTML = checkResult.tip;
            if (checkResult.right) {
                e.target.style.border = '2px solid green';
                
                span.style.color = 'green';
            } else {
                e.target.style.border = '2px solid red';
                span.style.color = 'red';
            }
        })
        inputEles[i].addEventListener('focus', function(e) {
            var index = inputEles.indexOf(e.target);
            var span = e.target.parentElement.getElementsByTagName('span')[0];
            span.innerHTML = originTip[index];
            span.style.visibility = 'visible';
            span.style.color = 'gray';
        })
    }
    $('#check').addEventListener('click', function(e) {
        var right = true;
        for (var i = 0; i < inputEles.length; i++) {
            var input = inputEles[i];
            checkValue(input);
            var span = input.parentElement.getElementsByTagName('span')[0];
            span.style.visibility = 'visible';
            span.innerHTML = checkResult.tip;
            if (checkResult.right) {
                input.style.border = '2px solid green';
                span.style.color = 'green';
            } else {
                input.style.border = '2px solid red';
                span.style.color = 'red';
                right = false;
            }
        }
        if (right) {
            alert('提交成功');
        } else {
            alert('提交失败，请检查输入');
        }
    })
    </script>
</body>

</html>
复制代码