a-input v-decorator基础上实现实时输入字符的校验

a-input已经有v-decorator校验的基础上,再添加输入的校验

实现如果input内输入非英文字符自动替换删除,无法输入

在已经有rule判断的基础上,增加不能输入的控制

 v-decorator="['nameEn', {rules:validatorRules.nameEn.rules,getValueFromEvent: (event) => {

 return event.target.value.replace(/[^a-zA-Z]/g, '') } } ]"

<!-- 英文名 -->
<a-col :span="12">
  <a-form-item :label="$t('customermanage.nameEn')" :labelCol="labelCol" :wrapperCol="wrapperCol">
    <a-input type="list" v-decorator="['nameEn', {rules:validatorRules.nameEn.rules,getValueFromEvent: (event) => {
                                return event.target.value.replace(/[^a-zA-Z]/g, '')
                            }}]" :trigger-change="true"/>
    </a-form-item>
  </a-col>

原来的v-decorator规则:

 validatorRules: {
                    nameEn: {
                        rules: [
                            { required: true, message: '请输入英文名!' },
                        ]
                    },

}

补充:

getValueFromEvent是 jeecg boot 内置的一个方法,此处应该是修改覆盖默认方法,来处理值

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`v-decorator`是`Vue.js`中一个用于表单校验的插件,主要的作用是监听表单控件的变化,然后根据预设的校验规则进行校验并给出相应的提示信息。 使用`v-decorator`进行表单校验的步骤如下: 1. 在表单控件上添加`v-decorator`指令,指定表单控件的名称、校验规则和提示信息。例如: ```html <a-form-item label="用户名" :colon="false" required> <a-input v-decorator="['username', {rules: [{required: true, message: '请输入用户名'}]}]" /> </a-form-item> ``` 在上面的代码中,`v-decorator`指令指定了表单控件的名称为`username`,校验规则为必填,提示信息为`请输入用户名`。 2. 在`Vue.js`组件中定义`form`对象,并使用`createDecorator`方法创建`v-decorator`装饰器。例如: ```javascript import { createDecorator } from 'vue-class-component'; export default class MyComponent extends Vue { form = this.$form.createForm(this); @createDecorator(this.form) myDecorator(name, options) { return { validateTrigger: ['blur', 'change'], rules: options.rules, }; } } ``` 在上面的代码中,`createDecorator`方法创建了一个名为`myDecorator`的`v-decorator`装饰器,并将其应用到了`form`对象中。`myDecorator`方法接收两个参数,第一个参数为表单控件的名称,第二个参数为表单控件的校验规则和提示信息。 3. 在`Vue.js`组件中定义校验方法,使用`form.validateFields`方法进行表单校验。例如: ```javascript export default class MyComponent extends Vue { form = this.$form.createForm(this); @createDecorator(this.form) myDecorator(name, options) { return { validateTrigger: ['blur', 'change'], rules: options.rules, }; } handleSubmit() { this.form.validateFields((err, values) => { if (!err) { console.log(values); } }); } } ``` 在上面的代码中,`handleSubmit`方法使用`form.validateFields`方法进行表单校验,并在校验通过后输出表单提交的值。`validateFields`方法接收一个回调函数,该函数的第一个参数为校验结果,如果校验通过则为`null`,否则为一个包含校验错误信息的对象;第二个参数为表单提交的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值