What are the precautions for using vux-ui custom form validation in Vue?

This time I will bring you Vue customization using vux-uiForm verificationWhat are the things to noteThe following is a practical case, let’s take a look.

When I first started using the framework vue with vux, I found that using this UI library was a bit incompetent. Let’s talk about the two demand problems I encountered during the form verification process and how to solve them.

1. Using the x-input component, we can see that the official only provides three types of is-typeverifier, namely: email, china-name, china-mobile, others are required How to write a custom validator?

Solution: Customize the is-type validator (you can use regular verification in valid after testing)

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />
export default {
  data() {
    return{
      code: '',
      codeValue: function(value){
        return {
          valid: value.length === 4,
          msg: "验证码有误!"
        }
      }
    }
  }
}

2. Only after the form content is filled in correctly can the button to submit the form be triggered ( As shown in the picture)

Solution: Use the @on-change event of the x-input component and the ref attribute

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" ref="refcode" @on-change="keyDown" />
<x-button action-type="submit" :disabled="disabled">完成</x-button>
 export default {
    data() {
      return{
        code: '',
        disabled: true,
        codeValue: function(value){
          return {
            valid: value.length === 4,
            msg: "验证码有误!"
          }
        }
      }
    },
    methods: {
      keyDown(){
        if(this.$refs.refcode.valid == true && this.code != ''){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      }
    }
  }

I believe you have already read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

Detailed explanation of the steps to use Angular routing guard

Detailed explanation of the steps to use React routing management React Router

The above is the detailed content of What are the precautions for using vux-ui custom form validation in Vue?. For more information, please follow other related articles on the PHP Chinese website!