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
其他补充：
浙公网安备 33010602011771号