zoukankan      html  css  js  c++  java
  • [Vue]vee-validate的使用——自定义校验规则及校验message

    1.安装vee-validate

     

    npm install vee-validate --save

    2.main.js里引用vee-validate插件

    import Vue from 'vue'
    import VeeValidate,{ Validator } from 'vee-validate'
    
    Vue.use(VeeValidate);
    new Vue({
      ...
    }).$mount('#app')

     

    3.自定义校验规则,包含格式为[1~9999]的正则表达式

    this.$validator.extend('customReg', {
          validate: value => {
            return /[1-9]d*/.test(value)
          },
        })

    4.自定义违反校验规则时提示的error messages

    mounted() {
    //this.$validator为Validator的实例方法
    this.$validator.localize("en", { custom: {
    //numberBest需与组件的name属性值保持一致 numberBest: { customReg:
    "error number", between:"error between", }, }, }) }

    (定义规则可参照官方文档:https://baianat.github.io/vee-validate/guide/messages.html#field-names

    5.组件中使用

    <input v-validate="'customReg|between:1,999'" name="numberBest">
  • 相关阅读:
    微信小程序入门
    webpack
    模块化开发(1)
    HTML5表单
    移动端入门
    MySQL
    js面向对象与PHP面向对象总结
    PHP
    Git指令
    Redux
  • 原文地址:https://www.cnblogs.com/vickylinj/p/9583785.html
Copyright © 2011-2022 走看看