javascript 如何测试Yup.array中值的唯一性?

sshcrbum  于 2022-12-21  发布在  Java
关注(0)|答案(6)|浏览(153)

我有动态输入量的形式(管理员电子邮件),但检查唯一性失败:

validationSchema={Yup.object().shape({
        adminEmails: Yup.array()
          .of(
            Yup.string()
              .notOneOf(Yup.ref('adminEmails'), 'E-mail is already used')

这里最好的方法是什么?仅供参考,作为表单助手,我使用Formik

sh7euo9m

sh7euo9m1#

试试这个:

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')
})
oxosxuxt

oxosxuxt2#

如果您希望在每个字段中而不是在数组中包含错误

Yup.addMethod(Yup.mixed, 'uniqueIn', function (array = [], message) {
    return this.test('uniqueIn', message, function (value) {
        return array.filter(item => item === value).length < 2;
    });
});
wlp8pajw

wlp8pajw3#

简单地这样做它为我工作
首先在react组件中定义此函数

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>
 )}

)} /〉

uyhoqukh

uyhoqukh4#

这是一个简单的内联解决方案,用于验证字符串数组是否只包含唯一元素:

Yup.array().of(Yup.string())
.test(
  'unique',
  'Only unique values allowed.',
  (value) => value ? value.length === new Set(value)?.size : true
)
ercv8c1e

ercv8c1e5#

现在响应可能太晚了,但是无论如何,您应该使用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;
    });
});
wwtsj6pe

wwtsj6pe6#

为了提高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;
    });
});

然后使用上下文对象调用validate,这样我们就可以在validate调用期间存储计算出的组

schema.validate(data, {context: {}}).then(...);

相关问题