[Vue.js] Vue3 : Vuetify Form-validation 유효성 검사

 

vuetify는 기본적으로 form input에서 validation을 제공한다.

:rule 을 활용하면 validate를 적용할 수있다.

 

 

vuetify Form 에는 input 값들을 validation 하는 기능을 기본적으로 제공한다.

보통은 v-text-field의 rule을 사용하는데, 다음처럼 넣으면 validate처리가 쉽게 된다.

이 방식은 구글링 하면 다 나와서 예시만.

 

 <v-text-field v-model="state..name" label="이름" :rules="state..name" ></v-text-field>

 

 

아래는 내가 사용하는 방식이다.

 

 

components

  <el-form
    ref="ruleFormRef"
    :model=""
    :rules="state.rules"
  >
      <el-form-item label="이름" prop="name">
        <el-input v-model="state.sample.name"></el-input>
      </el-form-item>
      
      <el-form-item label="설명" prop="desc">
        <el-input v-model="state.sample.desc" type="textarea"></el-input>
      </el-form-item>
      
  </el-form>

 

const state = reactive({
 sample : {
    name: "",
    desc: ""
  },
  rules: {
    name: [
      {
        required: true,
        message: "이름을 입력하세요.",
        trigger: "blur",
      },
      {
        min: 0,
        message: "이름 입력",
        trigger: "blur",
      },
    ],
    desc: [
      {
        required: false,
        message: "내용을 입력하세요.",
        trigger: "blur",
      },
      {
        min: 0,
        message: "내용 입력",
        trigger: "blur",
      },
    ],
  },
});

 

views

  let ruleForm = sample.value.ruleFormRef;
  if (!ruleForm) return;

  //데이터 체크
  await ruleForm.validate( async (valid) => {
    if (valid) {
    	값 전달
    }else{
    	에러 띄움
    }

 

 

 

 

중복검사

https://devel-log.tistory.com/72

[Vue.js] Vue3 데이터 중복 검사