表单验证是非常常用的功能,百度找到了vee-validate,官网http://vee-validate.logaretm.com/index.html

这篇博客帮了很大忙,有常用翻译http://www.cnblogs.com/xxwang/p/6104715.html

英文文档查了好半天,记录一下常用的用法

import VeeValidate from 'vee-validate';
//修改语言包
import zh_CN from 'vee-validate/dist/locale/zh_CN';
//自定义规则
import Validator from './assets/js/customValidate';

//VeeValidate语言包切换,放自定义提示前
Validator.addLocale(zh_CN);


//自定义提示
const dictionary = {
    zh_CN: {
        messages: {
            required: (field) => field + '不能为空'
        }
    }
};
Validator.updateDictionary(dictionary);

//customValidate.js
import { Validator } from 'vee-validate';

Validator.extend('mobile', {
    messages: {
      zh_CN:field => '手机号码输入不正确',
    },
    validate: value => {
        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
});

export default Validator;

//载入
Vue.use(VeeValidate, {
  locale: 'zh_CN',
});
Logo

前往低代码交流专区

更多推荐