杭州网络公司做网站报价,wordpress中文论坛,中国建材人才网,dede网站地图路径一、问题#xff1a;做表单校验时#xff0c;自定义校验和常规校验都失败#xff0c;自定义校验时无法拿到value值。二、原因#xff1a;1、变量名称那没有绑定prop。如果是常规校验#xff0c;没绑定prop的话#xff0c;在确定按钮时#xff0c;valid都是true。2、自定…一、问题 做表单校验时自定义校验和常规校验都失败自定义校验时无法拿到value值。二、原因1、变量名称那没有绑定prop。 如果是常规校验没绑定prop的话在确定按钮时valid都是true。2、自定义校验时绑定的prop的属性名写错了一定要是对应的form属性值比如这里的变量名称是name。 否则校验器那拿到的value值是undefined跟输入的值不一致的。
el-form :modelform refformRef :rulesrulesel-form-item label字段类型el-radio-group v-modelform.typeel-radio label文本文本/el-radioel-radio label段落段落/el-radioel-radio label下拉选项下拉选项/el-radioel-radio label数字数字/el-radioel-radio label给文件给文件/el-radioel-radio label文件列表文件列表/el-radio/el-radio-group/el-form-itemel-form-item label变量名称el-input v-modelform.name/el-input/el-form-item
/el-formconst validateVariableName (rule, value, callback) {console.log(value, value)if (value ) {callback(new Error(请输入变量值))} else {if (form.name ! ) {// if (!formRef.value) return// // formRef.value.validateField(name)}callback()}
}
const rules ref({// name: [{ required: true, validator: validateVariableName, trigger: blur }]VariableName: [{ required: true, message: 请输入变量名称, trigger: blur }]
})const handleSave (formRef) {if (!formRef) returnconsole.log(form, form.value.name)formRef.validate((valid) {console.log(valid, valid)if (valid) {console.log(保存的表单数据, form.value);dialogVisible.value false;}})
};三、问题解决 绑定prop以及prop的属性值变量要和form对应的值一致。
el-form :modelform refformRef :rulesrulesel-form-item label字段类型el-radio-group v-modelform.typeel-radio label文本文本/el-radioel-radio label段落段落/el-radioel-radio label下拉选项下拉选项/el-radioel-radio label数字数字/el-radioel-radio label给文件给文件/el-radioel-radio label文件列表文件列表/el-radio/el-radio-group/el-form-itemel-form-item label变量名称 propnameel-input v-modelform.name/el-input/el-form-item
/el-formconst validateVariableName (rule, value, callback) {console.log(value, value)if (value ) {callback(new Error(请输入变量值))} else {if (form.name ! ) {// if (!formRef.value) return// // formRef.value.validateField(name)}callback()}
}
const rules ref({// name: [{ required: true, validator: validateVariableName, trigger: blur }]name: [{ required: true, message: 请输入变量名称, trigger: blur }]
})const handleSave (formRef) {if (!formRef) returnconsole.log(form, form.value.name)formRef.validate((valid) {console.log(valid, valid)if (valid) {console.log(保存的表单数据, form.value);dialogVisible.value false;}})
}; 这样无论是常规校验或是自定义校验都能如愿拿到对应的效果。
