标签: vue-validator

我正在使用Vue验证

我的vuevlidate中有以下内容

      validations: {
        user_form: {
            email: {required,email, isUnique(value) {
                    // standalone validator ideally should not assume a field is required
                    if (value === '') return true;
                    // simulate async call, fail for all logins with even length
                    return new Promise((resolve, reject) => {
                       this.$http.post("v1/user-management/users/email-registeredi",{email:value}).then((res)=>{
                            console.log("res is ", res);
                            resolve(true);
                        },(err)=>{
                            reject(false)
                        })
                    })
                }},
            role: {required},
            password: {required}
        }
    },

上面创建了一个无限循环的http请求,尤其是当它收到错误时

我哪里错了

您好，我需要验证密码表单 除了必填字段 必须至少有一个大写字母，至少有一个小写字母，数字至少有一个和至少一个以下字符“#?!@$% ^ & * -" 我正在使用这个包https://vuelidate.js.org/

编辑

或为此使用正则表达式

如果启用该功能（如果您选择复选框），我正在尝试将一个字段设置为必填字段。但该验证不会通过单击选择/取消选择复选框来触发

 <b-form-checkbox v-model="form.banner.enabled">
     <span class="label-title control-label">Enable</span>
 </b-form-checkbox>

Vue.js

validations: {
    form: {
        banner:{
            image:{
                required: requiredIf(function() {
                    console.log("Image validator called")
                    return this.form.banner.enabled;
                })
            }
        }
    },
  },

我取消选中复选框，静态图像字段给出错误Its required

<b-form-input id="bannerImage" name="bannerImage" v-model="form.banner.image" :state="$v.form.banner.image.$dirty ? !$v.form.banner.image.$error : null"></b-form-input>
<b-form-invalid-feedback >
     <span >The image field is required.</span>
</b-form-invalid-feedback>

您可以复制 - 删除图像的值并取消选中enabled选项，然后单击保存。它会给出一个错误The image field is required.，因为验证器没有调用提交。提交代码是

this.$v.form.$touch()
if (this.$v.form.$anyError) {
     return; //return if any error
}
//execute save form code if no error

参考图片

我有来自教程的以下代码示例，我尝试找出如何以与示例类似的方式使用验证器，使用脚本设置、打字稿和组合 API。

props: {
    image: {
      type: String,
      default: require("@/assets/default-poster.png"),
      validator: propValue => {
        const hasImagesDir = propValue.indexOf("@/assets/") > -1;
        const listOfAvailableExt = [".jpeg", ".jpg", ".png"];
        const isValidExt = listOfAvailableExt.some(ext =>
          propValue.endsWith(ext)
        );
        return hasImagesDir && isValidExt;
      }
    }
  }

我知道如何声明类型和默认值，但我找不到使用验证器的方法。有没有什么函数可以验证不同的属性？

interface Props {
  image: string
}

const props = withDefaults(defineProps<Props>(), {
  image: require("@/assets/default-poster.png")
});