theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 新增 form-item 组件 requiredErrorMessage 属性, 允许用户自定义 required 错误提示信息

Browse Source
This commit is contained in:
就眠儀式 2022-09-09 01:40:43 +08:00
parent 6b8f0cc331
commit d3609d636d
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package/component/src/component/formItem/index.vue
View File

@ -37,6 +37,7 @@ export interface LayFormItemProps {
errorMessage?: string; errorMessage?: string;
rules?: Rule; rules?: Rule;
required?: boolean; required?: boolean;
requiredErrorMessage?: string;
} }
const props = withDefaults(defineProps<LayFormItemProps>(), { const props = withDefaults(defineProps<LayFormItemProps>(), {
@ -84,26 +85,22 @@ watch(
); );
// 错误状态和信息 // 错误状态和信息
const errorStatus = ref(false);
const errorMsg = ref(); const errorMsg = ref();
const errorStatus = ref(false);
// 校验数据有效性 // 校验数据有效性
const validate = (callback?: ValidateCallback) => { const validate = (callback?: ValidateCallback) => {
if (props.prop && (ruleItems.value as RuleItem[]).length > 0) { if (props.prop && (ruleItems.value as RuleItem[]).length > 0) {
// 校验规则 // 校验规则
const descriptor: Rules = {}; const descriptor: Rules = {};
descriptor[layForm.useCN ? props.label || props.prop : props.prop] = descriptor[layForm.useCN ? props.label || props.prop : props.prop] = ruleItems.value;
ruleItems.value;
const validator = new Schema(descriptor); const validator = new Schema(descriptor);
let model: { [key: string]: any } = {}; let model: { [key: string]: any } = {};
let validateMessage = null; let validateMessage = null;
// 使用中文错误提示 // 使用中文错误提示
if (layForm.useCN) { if (layForm.useCN) {
validateMessage = Object.assign( validateMessage = Object.assign({}, cnValidateMessage, layForm.validateMessage);
{},
cnValidateMessage,
layForm.validateMessage
);
model[props.label || props.prop] = filedValue.value; model[props.label || props.prop] = filedValue.value;
} else { } else {
layForm.validateMessage && (validateMessage = layForm.validateMessage); layForm.validateMessage && (validateMessage = layForm.validateMessage);
@ -112,11 +109,14 @@ const validate = (callback?: ValidateCallback) => {
// 自定义消息验证 // 自定义消息验证
layForm.requiredErrorMessage && layForm.requiredErrorMessage &&
// @ts-ignore // @ts-ignore
(validateMessage = Object.assign(validateMessage, { (validateMessage = Object.assign(validateMessage, { required: layForm.requiredErrorMessage }));
required: layForm.requiredErrorMessage,
})); props.requiredErrorMessage &&
validateMessage && validator.messages(validateMessage); // @ts-ignore
(validateMessage = Object.assign(validateMessage, { required: props.requiredErrorMessage }));
validateMessage && validator.messages(validateMessage);
// 开始校验 // 开始校验
validator.validate(model, (errors, fields) => { validator.validate(model, (errors, fields) => {
errorStatus.value = errors !== null && errors.length > 0; errorStatus.value = errors !== null && errors.length > 0;
@ -130,8 +130,8 @@ const validate = (callback?: ValidateCallback) => {
error.field = props.prop; error.field = props.prop;
}); });
errorMsg.value = props.errorMessage ?? _errors[0].message; errorMsg.value = props.errorMessage ?? _errors[0].message;
slotParentDiv.childElementCount > 0 && slotParentDiv?.childElementCount > 0 &&
slotParentDiv.firstElementChild?.classList.add("layui-form-danger"); slotParentDiv?.firstElementChild?.classList.add("layui-form-danger");
callback && callback(_errors, fields); callback && callback(_errors, fields);
} else { } else {
clearValidate(); clearValidate();
@ -139,7 +139,7 @@ const validate = (callback?: ValidateCallback) => {
}); });
} }
}; };
// 清除校验 // 清除校验
const clearValidate = () => { const clearValidate = () => {
errorStatus.value = false; errorStatus.value = false;

4
package/document-component/src/document/zh-CN/components/form.md
View File

@ -241,7 +241,7 @@ export default {
<template> <template>
<lay-form :model="ruleDemo1" ref="layFormRef1" :rules="rules" required initValidate> <lay-form :model="ruleDemo1" ref="layFormRef1" :rules="rules" required initValidate>
<lay-form-item label="邮箱" prop="email"> <lay-form-item prop="email" requiredMessage="你得输入邮箱">
<lay-input v-model="ruleDemo1.email"></lay-input> <lay-input v-model="ruleDemo1.email"></lay-input>
</lay-form-item> </lay-form-item>
<lay-form-item label="url路径" prop="url"> <lay-form-item label="url路径" prop="url">
@ -279,7 +279,7 @@ export default {
const rules = ref({ const rules = ref({
email : { email : {
type : 'email' type : 'email',
}, },
url : { url : {
type : 'url' type : 'url'