Home > Web Front-end > JS Tutorial > body text

How to customize form validation using vux-ui

php中世界最好的语言
Release: 2018-05-30 14:39:24
Original
3323 people have browsed it

This time I will show you how to use vux-ui to customize form verification, what are the notes for using vux-ui to customize form verification, the 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: "验证码有误!"
        }
      }
    }
  }
}
Copy after login

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;
        }
      }
    }
  }
Copy after login

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:

How to use routing guards in Angular routing

How to implement login in react-router routing with React Verification Control

The above is the detailed content of How to customize form validation using vux-ui. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template