我的表单具有动态输入量（管理员电子邮件），但是检查唯一性失败：
validationSchema={Yup.object().shape({
adminEmails: Yup.array()
.of(
Yup.string()
.notOneOf(Yup.ref('adminEmails'), 'E-mail is already used')
这里最好的方法是什么？ 仅供参考，作为表单助手，我使用
Formik试试这个：
Yup.addMethod(Yup.array, 'unique', function(message, mapper = a => a) {
return this.test('unique', message, function(list) {
return list.length === new Set(list.map(mapper)).size;
});
});
然后像这样使用它：
const headersSchema = Yup.object().shape({
adminEmails: Yup.array().of(
Yup.string()
)
.unique('email must be unique')
})
这是一个简单的内联解决方案，用于验证字符串数组仅包含唯一元素：
Yup.array().of(Yup.string())
.test(
'unique',
'Only unique values allowed.',
(value) => value ? value.length === new Set(value)?.size : true
)
如果你想在每个字段中都有错误而不是在数组中
Yup.addMethod(Yup.mixed, 'uniqueIn', function (array = [], message) {
return this.test('uniqueIn', message, function (value) {
return array.filter(item => item === value).length < 2;
});
});
简单地这样做它对我有用
首先在你的反应组件中定义这个函数
Yup.addMethod(Yup.array, "unique", function (message, mapper = (a) => a) {
return this.test("unique", message, function (list) {
return list.length === new Set(list.map(mapper)).size
})
})
只需将此模式放入您的 Formik 标签中
<Formik
initialValues={{
hotelName: "",
hotelEmail: [""],
}}
validationSchema={Yup.object().shape({
hotelName: Yup.string().required("Please enter hotel name"),
hotelEmail: Yup.array()
.of(
Yup.object().shape({
email: Yup.string()
.email("Invalid email")
.required("Please enter email"),
}),
)
.unique("duplicate email", (a) => a.email),
})}
onSubmit={(values, { validate }) => {
getFormPostData(values)
}}
render={({ values, errors, touched }) => (
<Form>
<FieldArray
name="hotelEmail"
render={(arrayHelpers) => (
<>
{values.hotelEmail.map((hotel, index) => (
<div class="row" key={index}>
<div className="col-md-8 mt-3">
<div className="user-title-info user-details">
<div className="form-group d-flex align-items-center mb-md-4 mb-3">
<label className="mb-0" htmlFor="hotelName">
{lang("Hotelmanagement.hotelsystemadmin")}
<sup className="text-danger">*</sup>
</label>
<div className="w-100">
<Field
name={`hotelEmail.${index}.email`}
className="form-control"
id="hotelEmail"
placeholder={lang(
"Hotelmanagement.hotelsystemadmin",
)}
/>
<span className="text-danger d-block">
{errors &&
errors.hotelEmail &&
errors.hotelEmail[index] &&
errors.hotelEmail[index].email && (
<span className="text-danger d-block">
{errors.hotelEmail[index].email}
</span>
)}
{errors &&
errors.hotelEmail &&(
<span className="text-danger d-block">
{errors.hotelEmail}
</span>
)}
</span>
</div>
</div>
</div>
</div>
<div className="col-md-2 mt-3">
{index > 0 && (
<i
className="bx bx-minus addnewBtn "
onClick={() => arrayHelpers.remove(index)}
/>
)}
{index === values.hotelEmail.length - 1 && (
<i
className="bx bx-plus addnewBtn ml-5"
onClick={() => arrayHelpers.push("")}
/>
)}
</div>
</div>
))}
</>
)}
/>
为了不显示错误，请执行以下操作
{errors &&
errors.hotelEmail &&(
<span className="text-danger d-block">
{errors.hotelEmail}
</span>
)}
可能来不及回复，但无论如何，你应该使用
this.createError({path, message});参见示例：
yup.addMethod(yup.array, 'growing', function(message) {
return this.test('growing', message, function(values) {
const len = values.length;
for (let i = 0; i < len; i++) {
if (i === 0) continue;
if (values[i - 1].intervalTime > values[i].intervalTime) return this.createError({
path: `intervals[${i}].intervalTime`,
message: 'Should be greater than previous interval',
});
}
return true;
});
});为了提高 Alex 答案的性能，请使用类似的方法来预先计算查找（使用 lodash）。
yup.addMethod(yup.mixed, 'uniqueIn', function (array = [], message) {
return this.test('uniqueIn', message, function (value) {
const cacheKey = 'groups';
if (!this.options.context[cacheKey]) {
this.options.context[cacheKey] = _.groupBy(array, x => x);
}
const groups = this.options.context[cacheKey];
return _.size(groups[value]) < 2;
});
});
然后使用上下文对象调用验证，以便我们可以在验证调用期间存储计算出的组
schema.validate(data, {context: {}}).then(...);
改进这个答案，这对我有用
import { array, ArraySchema, Flags, number, object } from 'yup';
export const yupTestUnique = <
TIn extends any[] | null | undefined,
TContext,
TDefault,
TFlags extends Flags
>(params: {
arraySchema: ArraySchema<TIn, TContext, TDefault, TFlags>;
iteratee?: (
value: TIn extends readonly (infer ElementType)[] ? ElementType : never
) => any;
message?: string;
}) => {
return params.arraySchema.test(
"unique",
params.message ? params.message : 'must be unique',
(values, context) => {
return values?.length
? new Set(
values.map((value) =>
typeof params.iteratee === "function"
? params.iteratee(value)
: value
)
).size === values.length
: true;
}
);
};
// Example
const createProductUnitValidationSchema = object({
unitId: number().required(),
price: number().required().min(0),
});
const createProductValidationSchema = object({
productUnits: yupTestUnique({
arraySchema: array()
.required()
.of(createProductUnitValidationSchema)
.min(1),
iteratee: (value) => value.unitId,
}),
});