vue表单验证 Vee-Validate 的使用
参考博客:
前端框架Vue(11)——Vue+表单验证 VeeValidate 实践
一、安装Vee-Validate
npm install vee-validate --save
二、创建一个js存放表单验证规则,validate.js
//validate.js中的详细代码(已引入中文文件),包含其他自定义验证规则 //折叠
import Vue from 'vue' import VeeValidate, { Validator } from 'vee-validate' import zh from 'vee-validate/dist/locale/zh_CN' // 引入中文文件 Validator.addLocale(zh) const config = { locale: 'zh_CN', fieldsBagName: 'fieldBags' } Vue.use(VeeValidate, config) // 自定义validate
//不配置则默认 const dictionary = { zh_CN: { //message : 提示语 messages: { required: (field) => '请输入' + field, number: (field) => field + '必须为数值', url: () => '请输入正确格式的服务器地址', ip: () => '请输入正确的IP地址', }, //attributes: 就是 filed attributes: { name:"用户名", ip: 'IP地址', httpPort: 'HTTP端口', userName: '用户昵称', mobile: '手机号码', emailAdd: '邮件地址', authCode: '您收到的验证码', loginPwd: '登录密码(6~18位)', traderpwd: '交易密码(6~18位)', recommender: '您的推荐人', isSee: '阅读用户协议,并同意', npwdLog: '新的登录密码', qrwdLog: '确认登录密码' } } } Validator.updateDictionary(dictionary) // 1.IPV4地址 Validator.extend('ipAddr', { messages: { zh_CN: field => '请输入正确的IPV4地址' }, validate: value => { return /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/.test(value) } }) // 2.端口【0~65535】 Validator.extend('port', { messages: { zh_CN: field => '请输入正确格式的端口号' }, validate: value => { return /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(value) } }) // 3.用户昵称 Validator.extend('name', { messages: { zh_CN: field => '用户昵称不允许特殊符号' }, validate: value => { return /^[\u4e00-\u9fa5A-Za-z0-9]*$/.test(value) } }) // 4.用户昵称 Validator.extend('phone', { messages: { zh_CN: field => '手机号格式不正确' }, validate: value => { return /^1[2-9]\d{9}$/.test(value) } }) // 5.邮箱 Validator.extend('email', { messages: { zh_CN: field => '邮箱格式不正确' }, validate: value => { return /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/.test(value) } }) // 6.验证码 Validator.extend('code', { messages: { zh_CN: field => '验证码格式不正确' }, validate: value => { return /^[0-9]*$/.test(value) } }) // 6.登录密码 Validator.extend('logpwd', { messages: { zh_CN: field => '登录密码格式不正确' }, validate: value => { return /^\S{6,18}$/.test(value) } }) // 7.交易密码 Validator.extend('tradpwd', { messages: { zh_CN: field => '交易密码格式不正确' }, validate: value => { return /^\S{6,18}$/.test(value) } }) // 8.推荐人 Validator.extend('recom', { messages: { zh_CN: field => '推荐人格式不正确' }, validate: value => { return /^[^\u4e00-\u9fa5]{0,}$/.test(value) } }) // 9.用户协议 Validator.extend('see', { messages: { zh_CN: field => '请阅读用户协议,并同意' }, validate: value => { return true } }) // 10.忘记密码,新的登录密码 Validator.extend('npwd', { messages: { zh_CN: field => '登录密码格式不正确[6~18位]' }, validate: value => { return /^\S{6,18}$/.test(value) } }) // 11.忘记密码,确认新的登录密码 Validator.extend('qrwd', { messages: { zh_CN: field => '登录密码格式不正确[6~18位]' }, validate: value => { return /^\S{6,18}$/.test(value) } })
//再附上个内置的校验规则,折叠
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
三、组件中使用
<div class="layui-form-item"> <label class="layui-form-label">账户</label> <div class="layui-block"> <input v-model="name" v-validate="'required|min:3|alpha'" :class="{ input: true, 'is-danger': errors.has('name'), }" type="text" name="name" class="layui-input" placeholder="账户" /> <span v-show="errors.has('name')" class="text-style" v-cloak > {{ errors.first("name") }} </span> </div> </div>
补充说明:
v-validate 属性:管道形式进行过滤,验证条件。官方已有的验证条件:required,email,ip等等(官方规定好的几种错误类型),也可以使用自己定义的验证条件(见下),这里是用户名的输入框,需要满足必填和用户名的格式。v-validate="‘required|name’" :required代表这个是必填项,|name要和validate.js中你写对验证规则导出对时候名字对应上。
v-validate自定义验证条件使用:
v-validate="'name'" //'name'为自定义的validate名称,
//name:"xxx" 中 xxx 表示 attributes 也就是就是 输出时的filed
span中用到了errors的几个方法,这里的参数都是定义了验证规则的表单的name。列举几个errors的方法: //折叠
1、first(‘field') field中(也就是刚刚说过的name表单)中的第一个错误 2、collect(‘field') field中所有的错误 3、has(‘field') field中是否有错误 4、all() 当前表单中的所有错误 5、any() 当前表单中是否有错误 6、count() 当前表单中的错误数量 7、clear() 清除当前表单中的所有错误
其他:点击按钮,再次验证
<div class="loginbutton"> <div @click="doSubmit">立即登录</div> </div>
methods: { doSubmit() { this.$validator.validateAll().then(valid => { // 所有校验通过valid 为true if (valid) { // 发送数据 } else { console.log('提交失败') } }) }, }
// validateAll()校验所有,只要有一个校验失败了,就返回false
其他补充: