Validation 表单验证插件 jQuery 汉字自定义验证并动态提示

最新推荐文章于 2022-11-23 22:00:29 发布

原创最新推荐文章于 2022-11-23 22:00:29 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何在业务场景中针对输入框字符个数进行限制，特别是考虑到汉字在数据库中占用两个字符的情况。作者提供了一个自定义的jQuery验证方法`countMaxLength`，该方法通过遍历输入值的Unicode编码来判断字符是否为ASCII码，并据此计算实际长度。当输入长度超过预设限制时，会显示错误消息。这个方法在前端表单验证中可以有效防止超过数据库字段长度限制的问题。

业务场景需：要对输入框的字符个数做限制，该插件汉字是算一个字符的但在数据库中是算两个，所以需要自定义验证对个数限制

1、自定义规则

$.validator.addMethod("countMaxLength", function (value, element, params) {
    var inputLength = 0;
    //给一个变量来记录长度
    for (var i = 0; i < value.length; i++) {
        var countCode = value.charCodeAt(i);
        //返回指定位置的字符的Unicode编码
        //判断是不是ASCII码,Unicode码前128个字符是ASCII码
        if (countCode >= 0 && countCode <= 128) {
            inputLength++;
        } else {
            //如果是扩展码，则一次+2
            inputLength += 2;
        }
    }
    if (inputLength <= params) {
        return true;

    } else {
        $(element).data('error-msg', '超过最大长度' + params + '！');
        return false;
    }

}, function (params, element) {
    return $(element).data('error-msg');
});

二、引用的地方

purchaseNo: {countMaxLength: 10}

$("#form-mdDrugExpand-edit").validate({
    rules: {
        medicId: {required: true, digits: false, maxlength: 36},
        handselDrugCode: {maxlength: 10},
        purchaseNo: {countMaxLength: 10},
    },
    submitHandler: function (form) {
        saveExpand();
    },
    errorPlacement: function (error, element) {
        error.appendTo(element.parent().after());
    }
});