要素はカスタムフォーム検証を使用します

1. 問題の内容
プロジェクトの開発過程でフォーム検証が発生しましたが、今回の検証ルールは比較的厳しく、element-ui フォームに付属の検証では問題をまったく解決できませんでした。

2. 解決策:
elementui フォーム検証でカスタム検証を使用します。 validUsername はカスタム検証メソッドの名前です。

2.1 フォーム検証を定義します。

rules: {
  userTypeId: [
    { required: true, message: '请选择类型', trigger: 'change' },
  username: 
    { required: true, validator: validUsername, trigger: 'blur' }
  ]
}

2.2 カスタム検証メソッド:
注: メソッドの最初の定義は callback() を返す必要があります。そうでない場合、フォーム検証は成功しません。

export default {
  name: 'Registry',
  data() {
    // js部分
    const validUsername = (rule, value, callback) => {
      const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!reg.test(value)) {
        callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
      } else {
        callback()
      }
    }
  }
}

3. フォームの検証

this.$refs.ruleForm.validate((valid) => {
  if(valid){
    console.log('表单校验成功')
  }
})

4. フォーム検証結果をクリアするには、
「キャンセル」ボタンを使用します。

this.$refs.pwdChangeForm.clearValidate()

単純なケース: パスワードを変更する

フォーム検証を定義します。

rules: {
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
    { required: true, validator: toPassword, trigger: "blur" }
  ],
  confirmPassword: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ]
},

カスタム検証メソッド:
注: メソッドの最初の定義は callback() を返す必要があります。そうでない場合、フォーム検証は成功しません。

export default {
  name: 'Registry',
  data() {
    // js部分
    // 密码自定义校验
    const toPassword = (rule, value, callback) => {
      var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
      if (!passwordreg.test(value)) {
        callback(
          new Error(
            '密码必须由大写字母、小写字母、数字、特殊符号中的2种及以上类型组成!'
          )
        )
      } else {
        callback()
      }
    }
    // 确认密码自定义校验
    const equalToPassword= (rule, value, callback) => {
      if (this.infoForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    }
  }
}

参考記事: element-ui フォームカスタム検証_element フォームカスタム検証_Zheng Shixiu のブログ - CSDN ブログ

要素はカスタムフォーム検証を使用します

おすすめ