vee-validate
是vue项目中前端用到的一个表单验证插件
npm install vee-validate --save
假如我们的验证都是放在一个统一的验证文件validate.js
中
直接上代码吧
import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
// vee-validate配置
const config = {
aria: true,
classNames: {},
classes: false,
delay: 0,
dictionary: null,
errorBagName: "errors", // change if property conflicts
events: "blur",
fieldsBagName: "fields",
i18n: null, // the vue-i18n plugin instance
i18nRootKey: "validations", // the nested key under which the validation messages will be located
inject: true,
// 这一荐项目跟后面的dictionary.zh_CN对应
locale: "zh_CN",
validity: false
};
Vue.use(VeeValidate, config);
// 自定义相关提示
const dictionary = {
zh_CN: {
// attributes对应form表单的name值
attributes: {
loginUsername: "帐号",
loginPassword: "密码",
captcha: "图形验证码"
},
// 对应各个rule返回的提示信息,这里自定义一些中文提示
// ${field}对应 attributes各属性的值
messages: {
required: field => `${field}不能为空`,
min: (field, value) => `${field}不能少于${value}位字符`,
max: (field, value) => `${field}不能多于${value}位字符`,
length: (field, value) => `${field}必须是${value}位字符`
}
}
};
Validator.localize(dictionary);
通过v-validate
属性绑定各个input
输入框,v-validate通过”|”竖线隔开各个验证规则
下面组件使用的是mint-ui
框架,登录按钮绑定一个login
方法,login
方法触发的时候,进行各项验证
<template>
<div class="login-container">
<div class="g-input" ref="loginForm">
<!-- user -->
<mt-field label=" " v-model.trim="loginForm.username" placeholder="手机号/用户名/邮箱" class="login-user" v-validate="'required|min:6|max:20'" name="loginUsername" :attr="{maxlength:20}"></mt-field>
<!-- password -->
<mt-field label=" " v-model="loginForm.password" placeholder="请输入登录密码" :type="passwordType" class="login-pwd" v-validate="'required|min:6'" name="loginPassword">
<div :class="toggleClass" @click="togglePassword"></div>
</mt-field>
<mt-field label="验证码" v-model.trim="loginForm.code" placeholder="请输入验证码" v-validate="'required|length:6'" name="captcha" :attr="{maxlength:6}">
<img :src="captcha" height="35px" width="80px" @click="getCode" style="margin-left:10px;">
</mt-field>
</div>
</div>
</template>
<script scoped>
import Vue from "vue";
import { mapGetters } from "vuex";
import "@/utils/security";
import { Spinner } from "mint-ui";
import { Toast } from "mint-ui";
import "@/utils/validate";
Vue.component(Spinner.name, Spinner);
export default {
name: "Login",
methods: {
// 登录
login() {
// 先关闭已有的toast,否则会重叠
this.toast && this.toast.close();
this.$validator.validate().then(flag => {
// 验证
// 验证不通过时,flag返回false,验证通过时,flag返回true
if (!flag) {
const errors = this.$validator.errors;
// 这里还可以通过遍历errors对象,完全自定义提示
// errors.items.forEach(item => {
// let field = item.field;
// let rule = item.rule;
// // switch (field) {
// // case "username":
// // if (rule == "required") {
// // item.msg = "用户名不能为空";
// // } else if (rule == "min") {
// // item.msg = "用户名不能少于6个字符";
// // } else if (rule == "max") {
// // item.msg = "用户名不能多于20个字符";
// // }
// // break;
// // case "password":
// // if (rule == "required") {
// // item.msg = "密码不能为空";
// // } else if (rule == "min") {
// // item.msg = "密码不能少于6位字符";
// // }
// // break;
// // case "code":
// // if (rule == "required") {
// // item.msg = "验证码不能为空";
// // } else if (rule == "length") {
// // item.msg = "验证码必须是6位字符";
// // }
// // break;
// // }
// });
// console.log(errors);
// 从items中取第一个错误,toast方法提示
this.toast = Toast(errors.items[0].msg);
return;
}
// 前端验证通过
// 提交
this.$store
.dispatch("loginByUsername", {
username: this.loginForm.username,
password: this.encryptPassword,
code: this.loginForm.code
})
.then(res => {
...
});
});
},
}
};
</script>
还是在validate.js
文件中,这样设置,需要安装vue-i18n
依赖
import zh_CN from "vee-validate/dist/locale/zh_CN";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: "zh_CN"
});
Vue.use(VeeValidate, {
i18n,
i18nRootKey: "validation",
dictionary: {
zh_CN
}
});
来源网络
after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字,而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url
表格如果字段多,有横向滚动条是不是不方便?可拖拽的滚动是不是就方便了?
使用create-vue创建vue3项目,vite,vue3
相对VUE2 ,VUE3做了哪些优化和改进呢?
vue项目,不使用window.location.reload(),如何刷新当前页面?
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
vue2.0 v-html指令有潜在的xss风险,如何解决?
vue项目通过axios怎么下载二进制文件或图片?
ant.design UI框架 同时使用v-model或value属性时, placeholder不显示
如何在VUE项目中添加stylelint,检查css,scss,less的语法问题,保证团队代码的规范统一
VUE全局函数
定义了服务端渲染的属性名称常量SSR_ATTR,定义了一些资产类型常量ASSET_TYPES,定义了生命周期相关钩子函数的函数名称
使用iviewui-admin框架构建管理系统时,遇到的各类问题
vue项目中动态图片路径拼接
vue下filter方法的调用
21个vue顶级UI框架: Vuetify,Quasar,Vue Material,Keen-UI,Buefy,Bootstrap Vue,Muse-UI,AT-UI,Vux,iView,Uiv,Vuikit,Onsen UI+Vue,Semantic UI+Vue,Fish-UI,Mint UI,Framework7 Vue,Cube UI,Vueblu,Ant Design Vue
&amp;amp;quot;.vue&amp;amp;quot;文件是如何解析成js对象的~
立个flag,看过年这段时间能不能把vue的源码读完?多年前看过jQuery的部分源码,如果想要更深入的了解vue,还是得从源码开始
vue源码阅读,慢慢学习
vue的生命周期函数
vue组件的数据data为什么一定要是函数 ?
Mint-ui this.$messagebox点取消时,报错:Uncaught (in promise) cancel
vue-validate使用
这就是个vue的坑。。。
vue如何监听enter事件?
vue使用axios进行form表单提交
vue中如何改变title标题
如果在vue2.0中使用NProgress进度条
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。也是vue2.0官方推荐的,同时不再对vue-resource(vue1.0使用)进行更新和维护
分析Vue.js源码
npm run dev模式下,webpack4+vue2项目下,类似'/user/login'二级路由,刷新时静态资源路径不对,静态资源返回404
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"
did you register the component correctly? For recursive components, make sure to provide the "name" option
vue.js如何查看注册了哪些组件,获取组件名称
vue底层的Virtual DOM就是基于snabbdom修改的