How to use vee-validate - 10 common examples

return reg.test(value)
    }
}
Validator.extend('http', isHttp)
/*
    长字符
*/
const longchar = {
    getMessage (field, args) { // 错误提示
        return '请输入' + field
    },
    validate: value => { // 验证规则
        return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；;“”‘’。\."'\\\/])*$/.test(value)
    }
}
Validator.extend('longchar', longchar)

/*
    短字符
*/
const singlechar = {
    getMessage (field, args) { // 错误提示
        return '请输入' + field
    },
    validate: value => { // 验证规则
        return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；;“”‘’。\."'\\\/])*$/.test(value)
    }
}
Validator.extend('singlechar', singlechar)

/*
    更新Validator

}
}
Validator.extend('longchar', longchar)

/*
    短字符
*/
const singlechar = {
    getMessage (field, args) { // 错误提示
        return '请输入' + field
    },
    validate: value => { // 验证规则
        return /^([a-zA-Z0-9]|[\u4e00-\u9fa5]|[\(\)\+\-《》_,，；;“”‘’。\."'\\\/])*$/.test(value)
    }
}
Validator.extend('singlechar', singlechar)

/*
    更新Validator
*/
const dictionary = {
    zh_CN: {
        messages: {
            name: () => '请输入正确的内容',
            longchar: () => '请输入正确的内容',
            singlechar: () => '请输入正确的内容',
            id: () => '格式不正确，只能包含下划线，数字，英文小写',
            http: () => '请输入以http://开头的URL',
            required: (field) => '请输入' + field,
            numeric: (field) => '请输入数字',
            regex: (field) => field + '不合法'
        },

}
Validator.extend('name', isName)
/*
    id
*/
const isID = {
    getMessage (field, args) { // 错误提示
        // zh_CN: field => '请输入' + field
        return '请输入' + field
    },
    validate: value => { // 验证规则
        var reg = /^[a-z0-9_]{1,20}$/
        return reg.test(value)
    }
}
Validator.extend('id', isID)

const isHttp = {
    getMessage (field, args) { // 错误提示
        // zh_CN: field => '请输入' + field
        return '请输入' + field
    },
    validate: value => { // 验证规则
        var reg = /^http:\/\/[^\s]+/
        return reg.test(value)
    }
}
Validator.extend('http', isHttp)
/*
    长字符
*/
const longchar = {

: "en-US"),
  messages: null,
  strict: true,
  events: 'blur'
  // events: 'keyup|input|blur'
}

Validator.extend('noEmail', {
  getMessage: () => '格式不正确',
  validate: value => {
    return (/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/gi.test(value))
  }
})


Validator.extend('isIP', {
  getMessage: () => 'ip格式不正确',
  validate: value => {
    return (/((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g.test(value))
  }
})

Validator.extend('isNumber', {
  getMessage: () => '输入必须为数字',
  validate: value => {
    return (/^\d{1,}$/.test(value))
  }
})

Vue.use(VeeValidate, config)

export default VeeValidate

import { sync } from 'vuex-router-sync'
import store from './store/index'
import RouterConfig from './router'
import axios from 'axios'
import api from './lib/api'
import App from './views/index.vue'
import moment from 'moment'
import zh_cn from 'vee-validate/dist/locale/zh_CN'

console.log(moment().format());

Vue.use(api,axios); // 自定义插件, 其内有全局请求属性方法：api (用法：this.$api(url, params, callback)) 和 axios (用法：this.$http.get 或 post)
Vue.use(VueRouter);
Vue.use(Vuex);

Validator.addLocale(zh_cn); // 加载本地化语言文件
Vue.use(VeeValidate,{locale: 'zh_CN'}); // 设置为中文

const router = new VueRouter({base: __dirname, routes:RouterConfig});
sync(store, router);
new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App)
});

extend("min", {
  ...min,
  message: "Veuillez saisir au moins {length} caractères"
});

extend("max", {
  ...max,
  message: "Veuillez ne pas dépasser {length} caractères"
});

extend("email", {
  ...email,
  message: "Veuillez saisir une adresse email valide"
});

extend("min_value", {
  ...MinValue,
  message: "Ce champs doit être supérieur à {min}"
});

extend("max_value", {
  ...MaxValue,
  message: "Ce champs doit être inférieur à {max}"
});

extend("confirmedBy", {
  params: ["target"],
  // Target here is the value of the target field
  validate(value, { target }: any) {
    return value === target;
  },
  // here it is its name, because we are generating a message

},
  // here it is its name, because we are generating a message
  message: "Ce champs doit être identique au champs {target}"
});

extend("ext", {
  ...ext,
  message: "Ce type de fichier n'est pas supporté"
});

extend("size", {
  ...size,
  message: "Ce fichier dépasse la taille maximale autorisée : {size} kB"
});

extend("integer", {
  ...integer,
  message: "Ce champs ne doit contenir qu'un nombre entier"
});

extend("regex", {
  ...regex,
  message: "Le format de ce champs est incorrect"
});

import { Validator } from "vee-validate"

// Validator.extend("password", {
//   messages: {
//     zh_CN: field => field + "不能少于十位数"
//   },
//   validate: value => {
//     return value
//   }
// })
Validator.extend("confirmPassword", {
  // messages: {
  //   zh_CN: field => "两次输入密码不一致"
  // },
  validate: (val1, val2) => {
    if (val2.lengh > 0) {
      return val1 === val2[0]
    } else {
      return false
    }
  }
})

export default Validator

import VCharts from 'v-charts'
Vue.use(VCharts);

import VueClipboards from 'vue-clipboards';
Vue.use(VueClipboards);

import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen);

import BackToTop from 'vue-backtotop'
Vue.use(BackToTop)

import VeeValidate, { Validator } from "vee-validate";
import zh_CN from "vee-validate/dist/locale/zh_CN";
Validator.localize("zh_CN", zh_CN);
Vue.use(VeeValidate, {
  locale: "zh_CN",
//   delay: 500,
  dictionary: {
    zh_CN: {
      messages: {
        required: field => `${field} 不能为空`,
        confirmed: (field, targetField) => `${field} 和 ${targetField} 不匹配`,
        regex: field => `${field} 不符合要求格式`
      }
    }
  }
});

import $ from 'jquery'
$.ajaxSetup({ cache: false });