JQuery 和JS 对Form表单验证和输入框验证

来源：互联网发布：淘宝客昵称怎么修改编辑：程序博客网时间：2024/06/05 15:17
最近在做项目，项目上表单需要验证，但是不会引入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>
0 0