form表单及vxe-table在线表格校验不含特殊字符

form表单效果：

 vxe-table效果：（效果比较特殊）

vxe-input输入框输入内容，若鼠标点击离开此输入框，则自动删除特殊符号。

字段编码这一列是自动解析出字段名称的首拼小写（解析方法看前一篇博客）

 form表单：

<script>
export default {
    
    data() {
        let vaildateInput = (rule, value, callback) => {
            if (!this.checkSpecicalKey(value)) {
                callback(new Error("不能含有特殊字符"));
            } else {
                callback();
            }
        };
        return: {
            formRule: {
               form_name: [
                {
                  required: true,
                  message: "请输入信息填报表名称",
                  trigger: "blur",
                },
                {
                  validator: vaildateInput,
                   trigger: ["blur", "change"],
                },
                ],
            }
        }
    },
    methods: {
        // 特殊字符校验
        checkSpecicalKey(str) {
            // 以下特殊字符禁用
            let specialKey =
                "[`~!@#$^&*¥-+=/=|{}';'\\[||]<>/?·~！@#￥%&……*————{}——|《》‘’【】''、？]";
            for (let i = 0; i < str.length; i++) {
                if (specialKey.indexOf(str.substr(i, 1)) != -1) {
                    return false;
                }
            }
            return true;
        },
    }
}

 vxe:

<vxe-column
                width="100"
                field="fieldName"
                title="字段名称"
                :edit-render="{}"
            >
                <template #edit="{ row }">
                    <vxe-input v-model="row.fieldName" type="text" @blur="getPinyin(row)"></vxe-input>
                </template>
            </vxe-column>
            <vxe-column width="100" field="field_code" title="字段编码" :edit-render="{}">
                <template #edit="{ row }">
                    <vxe-input v-model="row.field_code" type="text"></vxe-input>
                </template>
            </vxe-column>

// 首拼解析
        getPinyin(row) {
            console.log('row=>',row.fieldName)
            row.fieldName = row.fieldName.replace(/[`~!@#$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*——\-+={}|《》？¥：“”【】、；‘’，。、]/g,"");
            console.log('rownew=>',row.fieldName)
            let pinyin = require("js-pinyin");
            pinyin.setOptions({ checkPolyphone: false, charCase: 1 });
            row.field_code = pinyin.getCamelChars(row.fieldName)
        },