Detailed explanation of the use of vue validator (vue-validator)

Official document: http://vuejs.github.io/vue-validator/zh-cn/index.html

github project address: https:// github.com/vuejs/vue-validator

See the official documentation for how to use vue-validator alone. This article is used in combination with vue-router.

Install validator

Do not add a custom validator or a public validator that does not need to be used globally, install the validator in main.js , using the CommonJS module specification, you need to explicitly use Vue.use() to install the validator component.

import Validator from 'vue-validator'
Vue.use(Validator)

When used together with vue-router, verification must be installed before calling router#map, router#start and other instance methods.

To customize the validator, create a js file and install the validator component in the file. For example: validation.js

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器

Custom validator

The official api provided is as follows

input[type="text"]
input[type="radio"]
input[type="checkbox"]
input[type="number"]
input[type="password"]
input[type="email"]
input[type="tel"]
input[type="url"]
select
textarea

But the above does not It must meet our needs. At this time, we need to use another global API for registering and obtaining global validators.

Vue.validator( id, [definition] )

Example Define validation.js The content is as follows

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器
//添加一个简单的手机号验证 
//匹配0-9之间的数字,并且长度是11位
Vue.validator('tel', function (val) {
  return /^[0-9]{11}$/.test(val)
});
//添加一个密码验证
//匹配6-20位的任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
Vue.validator('passw', function (val) {
  return /^(\w){6,20}$/.test(val)
});

Use validator

Validator syntax

  
    

   不得少于3个字符
   不得大于15个字符
    
 

By default, vue-validator will automatically verify based on the validator and v-validate instructions. However, sometimes we need to turn off automatic verification and trigger verification manually when necessary. If you don't need automatic validation, you can turn off automatic validation through the initial attribute or the v-validate validation rule.

is as follows:

  
  

 不得少于3个字符
 不得大于15个字符
     

Terminal command problem

Example: User registration verification

is used A component to display prompt information

toast.vue

Registered user: If we need to fill in the mobile phone number and enter the password twice

If you click next step, you will be prompted "Please complete the form" because the verification fails; if the text box loses focus after gaining focus, a corresponding error message will be prompted; if the content is filled in correctly, it will prompt that the verification has passed and send a corresponding request.

The effect is as shown

Related recommendations:

2020 Summary of front-end vue interview questions (With answers)

vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

More programming-related knowledge, Please visit: Introduction to Programming! !

The above is the detailed content of Detailed explanation of the use of vue validator (vue-validator). For more information, please follow other related articles on the PHP Chinese website!