element-ui 表单验证触发方式 trigger :‘change‘ 和 ‘blur’ 的区别

在Vue3中结合Element-UI进行表单验证，如果你想要检查输入是否为纯数字，你可以使用Element-UI提供的`el-form`组件的`rules`选项，并利用自定义验证函数或者内置的正则表达式验证。下面是一个示例： ```javascript <template> <el-form :model="formData" ref="formRef"> <el-form-item label="数字字段" prop="numberField"> <el-input v-model.number="formData.numberField"></el-input> </el-form-item> <!-- ... 其他表单项 --> </el-form> </template> <script setup> import { defineProp } from 'vue'; import { required, validator } from 'element-plus验证'; // 自定义验证规则 const isNumeric = (rule, value) => { return Number.isInteger(value) || value === ''; }; const rules = { numberField: [ { required: true, message: '请输入数字', trigger: 'blur' }, { validator: isNumeric, message: '输入无效，请只输入整数', trigger: ['blur', 'change'] } ] }; export default { props: { formData: { type: Object, default: () => ({ numberField: '' }), watch: { numberField: { immediate: true, handler(newVal, oldVal) { if (newVal !== oldVal && !isNumeric(newVal)) { this.$refs.formRef.validateField('numberField'); } } } } } }, setup(props) { const formRef = ref(props.formData); return { formRef, rules }; } }; </script> ``` 在这个例子中，我们定义了一个`isNumeric`函数用于检查输入是否为纯数字，然后在`numberField`的验证规则中使用了这个函数。当用户输入时，如果输入的不是纯数字，会触发错误提示。