Vant + VeeValidate 3 양식 유효성 검사

2234 단어 vue
이전에vant를 사용하여 모바일 개발을 했지만 복잡한 폼 입력을 하지 못했다.간단한 입력은 모두 직접 창 알림으로 하면 된다.이번에 요구한 것은 페이지에 입력해야 할 많은 내용이 있다.vant 문서를 보았을 때 vant가 자체로 가지고 있는 폼 검사 기능이 매우 약하고 Field 구성 요소 자체도 사용자 정의 검사를 지원하지 않는다는 것을 발견했다.[vant의git개발계획에 따르면 2020년 상반기에form 관련 구성 요소를 추가하면 그때가 되면 원생 지원이 있을 것이다.]
인터넷에서 한 번 찾아봤는데 vue에서 폼 검사를 했는데 라이브러리 VeeValidate가 있는데 폼 검사를 전문적으로 하는 거예요.이 라이브러리로 폼 검사를 실현하는 사람도 많다.인터넷에서 찾아보니 많은 사람들이 블로그에 쓴 것이 모두 VeeValidate의 초기 버전 코드로 현재의 최신 버전에 적용되지 않는다.오후에 문서를 봤는데 아주 간결하고 알기 쉬워서 데모를 간단하게 썼어요.



import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'
import { CHECK_MOBILE_PHONE } from '../../util/validate'

extend('mobilePhone', {
  validate:value=>{
    return CHECK_MOBILE_PHONE(value)
  },
  message:'        '
})
extend('mobileRequired', {
  ...required,
  message: '       !'
})
export default {
  name: 'binding',
  components: {
    ValidationObserver,
    ValidationProvider
  },
  mixins: [],
  props: {},

  data() {
    return {
      regForm: {
        mobileNumber: '',
        veryCode: ''
      }
    }
  },

  computed: {},

  watch: {},

  created() {
  },

  mounted() {
  },

  destroyed() {
  },

  methods: {
    onSubmit() {
      this.$refs.form.validate().then(success => {
        console.log(success)
      })
    }
  }
}

좋은 웹페이지 즐겨찾기