vue.js로validation이 있는 표를 만들었습니다.

기본 기능

・양식 입력 정확 또는 실시간 표시
• 발송 버튼을 눌렀을 때 모든 폼이 정확하게 입력되었는지 판단하고 분리 처리
이렇게
지금은 표가 비어 있는지 여부에 따라 판단하지만, 평가항목(글자수 제한 등)은 상대적으로 간단하게 추가할 수 있다.

설치 방법

validationvue-validator을 진행하려면 프로그램 라이브러리도 사용할 수 있지만 간단한validation만으로는 특별히 사용할 수 없습니다.
관공서Firebase+vuejs의 example를 참고하여 실시하다.
이번 소스 코드: github

validation 만들기

이번에는
* title
* description
* date
* location
구성의 형식.
입력한 정보는 new Event에 저장됩니다.
각 항목에 대해 boolean이 있는validation을 만듭니다.

data: {
      newEvent: {
        title: '',
        description: '',
        date: '',
        location: ''
      },
      validation: {
        title: false,
        description: false,
        date: false,
        location: false
      }
    },

validation을 진행하는 Filter 만들기

HTML 소스의 각 입력을 평가하는 필터를 만듭니다.
이번에는 공백 여부만 만들었을 뿐 여기서 평가를 추가하면 다른 평가 방법을 추가할 수 있다.
예를 들어 공식적인 example에서 이메일 주소인지 정규 표현식인지 확인하고 문자 수 제한을 가할 수 있다.

 filters: {
      titleValidator: {
        write: function (val) {
          this.validation.title = !!val
          return val
        }
      },
      descriptionValidator: {
        write: function (val) {
          this.validation.description = !!val
          return val
        }
      },
      dateValidator: {
        write: function (val) {
          this.validation.date = !!val
          return val
        }
      },
      locationValidator: {
        write: function (val) {
          this.validation.location = !!val
          return val
        }
      }
    },

겸사겸사 소스 코드 내의

this.validation.title

등은 방금 발표된 데이터 중의validation의 요소다.
Filter 평가 결과를validation 요소에 저장합니다.

HTML 소스에서 입력 항목이 Filter를 통해

<form id="form" v-on="submit:addEvent">
    <p>title:<input v-model="newEvent.title | titleValidator"></p>
    <p>description:<input v-model="newEvent.description | descriptionValidator"></p>
    <p>data:<input v-model="newEvent.date | dateValidator"></p>
    <p>location:<input v-model="newEvent.location | locationValidator"></p>
    <input type="submit" value="Add event">
  </form>

v-model은 편집 가능한 소자에 양방향 데이터 귀속을 제공한다(참고 자료

v-model="newEvent.title | titleValidator"

데이터에서 선언된 new Eventtitle의 경우 Filter를 통해 작성된 titleValidator입니다.
titleValidator의 평가 결과는 데이터의validation입니다.언제든지 타이틀에 저장.

오류 표시

v-show에 boolean을 제출하면 실제 상황에서만 표시됩니다.
여기에 쓸 요소를 전달하는validation을 통해 잘못된 경우에만 표시할 수 있습니다.

  <ul class="errors">
    <li v-show="!validation.title">title cannot be empty.</li>
    <li v-show="!validation.description">description cannot be empty.</li>
    <li v-show="!validation.date">date cannot be empty.</li>
    <li v-show="!validation.location">location cannot be empty.</li>
  </ul>

오류 유무를 자주 감시하다

입력 창의validation에 가짜가 있는지 확인하십시오.
자주 계산되는 컴퓨터에서 boolean의 isValid를 되돌릴 준비가 되어 있습니다.

computed: {
      isValid: function () {
        var valid = true
        for (var key in this.validation) {
          if (!this.validation[key]) {
            valid = false
          }
        }
        return valid
      }
    },

validation의 모든 요소를 확인하고 가짜를 발견하면 가짜로 돌아갑니다.

  methods: {
      addEvent: function (e) {
        e.preventDefault()
        if (this.isValid) {
          console.log("success")
        }else{
          console.log("need edit")
        }
      },
    }

dd 버튼을 누르면 isValid 값에 따라 처리가 변경됩니다

<form id="form" v-on="submit:addEvent">
    <!--中略-->
    <input type="submit" value="Add event">
  </form>

form에서 submit을 누르면 addEvent 방법을 실행합니다.

    methods: {
      addEvent: function (e) {
        e.preventDefault()
        if (this.isValid) {
          console.log("success")
        }else{
          console.log("need edit")
        }
      },
    }

addEvent가 실행되면 isValid를 if 문서에서 평가하고 별도로 처리합니다.

Vue.참고서

Vue.입문 기초부터 실천 응용 프로그램 개발까지