在使用vee-validate
验证表单中受限于默认规则不够用,于是查阅文档,记录下如何自定义验证规则.
格式:
1 | const validator = { |
使用 extend(name,validator)
函数添加一个验证实例
1 | Validator.extend('truthy', { |
列子:
1 | const myCustomRule = { |
定义通过后台接口验证的规则:
1 | Validator.extend('sku', { |
在laravel
中使用:
app.js中引入文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17...
import VeeValidate, {Validator} from 'vee-validate';
import zh_CN from '../locale/zh_CN';
...
Validator.localize('zh_CN', zh_CN);
Vue.use(VeeValidate, {
locale: 'zh_CN',
fieldsBagName: 'fieldBags',
});
//手机号验证规则(可在所有组件中使用)
const isMobile = {
getMessage: field => field + '格式不正确',
validate: (value, args) => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
}
Validator.extend('mobile', isMobile);在组件中自定义规则
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<template>
<form>
<div :class="{'has-error' : errors.has('name')}">
<input type="text" name="name" v-validate="'myName'">
<span class="help-block" v-show="errors.has('name')">{{ errors.first('name') }}</span>
</div>
</form>
</template>
<script>
export default {
created() {
this.$validator.extend('myName', {
getMessage: field => field + '已存在!',
validate: (value, args) => {
return this.checkName(value);
}
}, {
immediate: false
});
},
methods:{
checkName(val) {
return this.$api.checkName(val).then(res => {
return res.code == 200 ? true : false;
});
},
}
}
</script>
设定验证触发条件,默认是change
添加以下配置变成失去焦点验证
data-vv-validate-on=”blur”
1 | <input type="text" name="name" data-vv-as="姓名" v-validate="'required|chinese'" data-vv-validate-on="blur" v-model="name"> |
Reference:文档