如何在保留Parsley.js校验提示的前提下自动删除校验不通过的无效值

根因分析 #

你当前的实现逻辑中，onblur绑定的字符清理函数执行优先级高于Parsley.js的blur校验逻辑，非法字符被提前清除后，Parsley校验时拿到的输入值已经符合规则，因此不会触发对应的错误提示。

可行实现方案 #

方案1：调整执行顺序，先校验再清理字符 #

删掉输入框上的onblur绑定逻辑，通过Parsley自带的校验完成事件触发字符清理，同时设置短延时保证用户能看到错误提示：

// 初始化Parsley实例
$('#username').parsley();

// 监听字段校验完成事件
$('#username').on('parsley:field:validated', function (field) {
    // 仅在校验不通过时执行清理
    if (!field.validationResult) {
        setTimeout(() => {
            // 调用你原有字符清理函数
            hasNumbersAndLetters(this);
            // 清理完成后重新校验，消除已无效的错误提示（不需要保留提示可删掉这行）
            $(this).parsley().validate();
        }, 300); // 300ms延时保证用户能看到提示内容，可根据需求调整
    }
});

输入框代码调整为：

<input type="text" id="username" name="username" data-parsley-type="alphanum" required value="<?php if (!empty($username)) echo $username; ?>" />

方案2：自定义Parsley校验器，整合校验与清理逻辑 #

直接将字符过滤逻辑封装到Parsley自定义校验规则中，维护更统一：

// 自定义带过滤功能的字母数字校验器
window.Parsley.addValidator('alphanumFilter', {
    validateString: function (value, requirement, field) {
        const illegalRegex = /[^a-zA-Z0-9\s-,]/gi;
        const filteredValue = value.replace(illegalRegex, '');
        // 存在非法字符时先展示提示，延时后清理
        if (filteredValue !== value) {
            setTimeout(() => {
                field.$element.val(filteredValue);
                field.validate();
            }, 300);
        }
        // 返回原始输入值的校验结果
        return !illegalRegex.test(value);
    },
    messages: {
        zh: '仅支持输入字母、数字、空格、短横线和逗号'
    }
});

输入框直接使用自定义校验规则即可：

<input type="text" id="username" name="username" data-parsley-alphanum-filter required value="<?php if (!empty($username)) echo $username; ?>" />

注意事项 #

保证字符清理的正则规则和Parsley校验规则完全一致，避免出现清理后仍校验不通过、或者非法字符未被清理的异常情况。

内容的提问来源于stack exchange，提问作者DJames