前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vant+veeValiDate表单验证的使用

vant+veeValiDate表单验证的使用

作者头像
biaoblog.cn 个人博客
发布2022-08-11 18:48:52
1.5K0
发布2022-08-11 18:48:52
举报

1.安装VeeValidate

代码语言:javascript
复制
npm install vee-validate --save

2.建立独立的valiDate.js文件 来存放验证规则和一些中文。

代码语言:javascript
复制
import { Validator } from 'vee-validate'
const customizeVal = () => {
let formatFileSize = function (size) {
let units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
let threshold = 1024
size = Number(size) * threshold
let i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(threshold))
return (size / Math.pow(threshold, i)).toFixed(2) * 1 + ' ' + units[i]
}
let fieldName = '' // 原来的i18n的fieldName会显示绑定的name值,就是英文,实际项目中不需要
console.log(fieldName)
Validator.localize('zh_CN', {
name: 'zh_CN',
attributes: {},
messages: {
_default: () => `${fieldName}无效`,
after: (field, [target]) => `${fieldName}必须在${target}之后`,
alpha_dash: () => `${fieldName}能够包含字母数字字符、破折号和下划线`,
alpha_num: () => `${fieldName}只能包含字母数字字符`,
alpha_spaces: () => `${fieldName}只能包含字母字符和空格`,
alpha: () => `${fieldName}只能包含字母字符`,
before: (field, [target]) => `${fieldName}必须在${target}之前`,
between: (field, [min, max]) => `${fieldName}必须在${min}与${max}之间`,
confirmed: (field, [confirmedField]) =>
`${fieldName}不能和${confirmedField}匹配`,
credit_card: () => `${fieldName}格式错误`,
date_between: (field, [min, max]) => `${fieldName}必须在${min}和${max}之间`,
date_format: (field, [format]) => `${fieldName}必须符合${format}格式`,
decimal: (field, [decimals = '*'] = []) =>
`${fieldName}必须是数字,且能够保留${
decimals === '*' ? '' : decimals
}位小数`,
digits: (field, [length]) =>
`${fieldName}必须是数字,且精确到${length}位数`,
dimensions: (field, [width, height]) =>
`${fieldName}必须在${width}像素与${height}像素之间`,
email: () => `${fieldName}不是一个有效的邮箱`,
ext: () => `${fieldName}不是一个有效的文件`,
image: () => `${fieldName}不是一张有效的图片`,
included: () => `${fieldName}不是一个有效值`,
integer: () => `${fieldName}必须是整数`,
ip: () => `${fieldName}不是一个有效的地址`,
length: (field, [length, max]) => {
if (max) {
return `${fieldName}长度必须在${length}到${max}之间`
}
return `${fieldName}长度必须为${length}`
},
max: (field, [length]) => `${fieldName}不能超过${length}个字符`,
max_value: (field, [max]) => `${fieldName}必须小于或等于${max}`,
mimes: () => `${fieldName}不是一个有效的文件类型`,
min: (field, [length]) => `${fieldName}必须至少有${length}个字符`,
min_value: (field, [min]) => `${fieldName}必须大于或等于${min}`,
excluded: () => `${fieldName}不是一个有效值`,
numeric: () => `${fieldName}只能包含数字字符`,
regex: () => `${fieldName}格式无效`,
required: () => `${fieldName}不能为空`,
size: (field, [size]) => `${fieldName}必须小于${formatFileSize(size)}`,
url: () => `${fieldName}不是一个有效的url`
}
})

// 手机号码验证
Validator.extend('mobile', {
getMessage: () => `请输入正确的手机号码`,
validate: value =>
value.length === 11 &&
/^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
value
)
})
}
//暴露出去
export default customizeVal

3.在main.js进行全局引入:

代码语言:javascript
复制
import VeeValidate from 'vee-validate'
import customizeVal from '../src/components/common/validate'
Vue.use(VeeValidate)
Vue.use(customizeVal)

4.在页面进行使用:

代码语言:javascript
复制
<van-field
v-model="username"
required
clearable
label="用户名"
placeholder="请输入用户名"
name="username"
v-validate="'required|max:10'"
:error-message="errors.first('username')"
:error="errors.has('username')"
/>
参数介绍:
name:用于区分验证,可自定义
v-validate:放验证规则,可放多个规则用 | 分开
errors.first('username'): 错误的文本提示
errors.has('username'): 验证的结果tue或者false

5.所有valiDate通过后再进行数据接口请求:

代码语言:javascript
复制
methods: {
login () {
this.$validator.validateAll().then(res => {
if (res) {
this.isLogin = true
axios.post(api.login, {
userName: this.username,
passWord: this.password
})
.then(res => {
if (res.data.message === true) {
Toast.success('登录成功!')
this.$router.push('/main')
} else if (res.data.message === false) {
Toast.fail('密码错误!')
} else if (res.data.message === '用户名不存在') {
Toast.fail('用户名不存在!')
}
})
.then(() => {
this.isLogin = false
})
}
})
}
},
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.安装VeeValidate
  • 2.建立独立的valiDate.js文件 来存放验证规则和一些中文。
  • 3.在main.js进行全局引入:
  • 4.在页面进行使用:
  • 5.所有valiDate通过后再进行数据接口请求:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档