javascript【案例】限定输入内空_resultdiv.innerhtml-CSDN博客

本文链接：https://blog.csdn.net/m0_43400750/article/details/111117950

用正方表达式限定输入框中只能输入4位数字表示的年份和1位或2位数字表示年份

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>限定输入内容</title>
</head>
<script>
    window.onload =function () {
        //获取元素对象
        var form = document.getElementById('form');
        var result = document.getElementById('result');
        var inputs = document.getElementsByTagName('input');

        //对表单的提交进行验证
        form.onsubmit = function () {
            return checkYear(inputs.year) && checkMonth(inputs.month);
        }

        //验证年份
        function checkYear(obj) {
            if (!obj.value.match(/^\d{4}$/)) {
                obj.style.borderColor = 'red';
                result.innerHTML = '输入错误，年份为4位数字表示';
                return false;
            }
            result.innerHTMl = '';
            return true;

        }

        //验证月份
        function checkMonth(obj) {
            if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
                obj.style.boderColor = 'red';
                result.innerHTML = '输入错误，月份为1-12之间';
                return false;
            }
            result.innerHTML = '';
            return true;
        }

        //年份添加单击事件
        inputs.year.onfocus = function () {
            this.style.borderColor = '';
        };

        //月份添加单击事件
        inputs.month.onfocus = function () {
            this.style.borderColor = '';
        };

        //失去焦点验证是否符合，onblur 事件会在对象失去焦点时发生
        inputs.year.onblur = function () {
            this.value = this.value.trim();
            checkYear(this);
        };
        inputs.month.onblur = function () {
            this.value = this.value.trim();
            checkMonth(this);
        };

    }


</script>
<body>
<form id="form">
    年份<input type="text" name="year">
    月份<input type="text" name="month">
    <input type="submit" value="提交">
</form>
<div id="result"></div>
</body>
</html>