JQuery 和JS 对Form表单验证和输入框验证_jquery form 根据条件添加需要校验的输入框-优快云博客

本文链接：https://blog.youkuaiyun.com/qzqanzc/article/details/70769619

本文介绍了作者如何在没有使用jQuery validate框架的情况下，利用JQuery和ES5编写了一个表单验证的DEMO。通过这个过程，不仅复习了JQuery和ES5的基础知识，还解决了项目中表单验证的需求。

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

最近在做项目，项目上表单需要验证，但是不会引入jquery validate 框架，我的jquery 本来就不是太号，ES 5也有一年多没有看过了，遇到这件事情，本着强迫症的不能见不得解决不了问题的本性，花3个小时写一个验证demo出来。希望对大家有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form" method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <!-- 为每个需要的元素添加required -->
        <input type="text" id="username" inputCheck='{"empty": true, "min": 2, "max": 3, "specialChar": "<>!@"}'
               class="required"/>
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required"/>
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo"/>
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
    </div>
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    var validate = {
        tips: {
            emptyTip: function (obj) {
                $(obj).after('<span class="emptyTips">输入不能为空</span>');
            },
            minTip: function (obj, minLength) {
                $(obj).after('<span class="minTips">' + "您输入的字符长度小于" + minLength + '</span>');
            },
            maxTip: function (obj, maxLength) {
                $(obj).after('<span class="maxTips">' + "您输入的字符长度大于" + maxLength + '</span>');
            },
            speciakKey: function (obj) {
                $(obj).after('<span class="specialTips">您不能输入特殊字符</span>');
            }
        },
        emptyRuleValidate: function (emptyFlag, obj) { //验证是否为空
            var content = $(obj).val().trim(); //去除输入框中的字符串
            var flag = true;
            if (emptyFlag == true && content.length <= 0) {
                validate.tips.emptyTip(obj);
                flag = false;
            }
            return flag;
        },
        minRuleValidate: function (minFlag, obj) {//验证输入框的最的长度是否小于最小值
            var content = $(obj).val().trim(); //去除输入框中的字符串
            var flag = true;
            if (minFlag >= 0 && minFlag > content.length) {
                validate.tips.minTip(obj, minFlag);
                flag = false;
            }
            return flag;
        },
        maxRuleValidate: function (maxFlag, obj) { //验证最大值是否满足要求
            var content = $(obj).val().trim(); //去除输入框中的字符串
            var flag = true;
            if (maxFlag >= 0 && maxFlag < content.length) {
                flag = false;
                validate.tips.maxTip(obj, maxFlag);
            }
            return flag;
        },
        specialKeyValidate: function (specialKeyFlag, obj) { //判断字符串是否包含特殊字符
            var content = $(obj).val().trim(); //去除输入框中的字符串
            var flag = true;
            if (specialKeyFlag.length > 0) {
                var specialKeys = specialKeyFlag.split('');
                specialKeys.forEach(function (element, index, array) {
                    flag = !element.indexOf(content) > 0; //逐个判断字符是否在内容中存在
                })
            }
            if (!flag)
                validate.tips.speciakKey(obj);
            return flag;
        },
        validateCommon: function (obj) {
            var flag = true;
            flag = true; // 表示无异常
            var rules = $(obj).attr("inputCheck");
            var ruleJson = JSON.parse(rules); // 将字符串转为JSON格式
            var emptyRule = ruleJson["empty"]; //解析是否为空属性
            var minRule = ruleJson["min"]; //解析最小长度属性
            var maxRule = ruleJson["max"]; //解析最大长度熟悉
            var specialCharRule = ruleJson["specialChar"]; //解析特殊字符

            //判断是否为空
            flag = validate.emptyRuleValidate(emptyRule || '', obj);
            if (!flag) return flag;
            //判断最小值是否满足要求
            flag = validate.minRuleValidate(minRule || '', obj);
            if (!flag) return flag;
            //判断最大值是否满足要求
            flag = validate.maxRuleValidate(maxRule || '', obj);
            if (!flag) return flag;
            //y验证字符串是否包含特殊字符
            flag = validate.specialKeyValidate(specialCharRule || '', obj);
            if (!flag) return flag;
            return flag
        },
        validateTextArea: function (input) {
            $(input).blur(function () {
                validate.validateCommon(input);
            });
        },
        validateForm: function (form) {
            $(form).submit(function () {
                $(form).find('[inputCheck]').each(function () {
                    validate.validateTextArea(this);
                    $(this).trigger('blur');
                });
                var errors = $(form).find('.emptyTip').length + $(form).find('.minTips').length + $(form).find('.maxTips').length + $(form).find('.specialTips').length;
                return errors > 0;
            });
        }

    }
    $(function () {
        var form = $("#form")[0];
        validate.validateForm(form);
    });
</script>
</body>
</html>