vee-validate 自定义验证规则

在使用vee-validate验证表单中受限于默认规则不够用,于是查阅文档,记录下如何自定义验证规则.

格式:

1
2
3
4
5
6
7
8
9
const validator = {
getMessage(field, args) {
//定义默认错误提示
//返回错误提示
},
validate(value, args) {
// 返回一个 Boolean 值或者一个 Promise对象.
}
};

使用 extend(name,validator)函数添加一个验证实例

1
2
3
4
Validator.extend('truthy', {
getMessage: field => 'The ' + field + ' value is not truthy.',
validate: value => !! value
});

列子:

1
2
3
4
5
6
7
8
9
10
const myCustomRule = {
getMessage(field, args) {
return field + '格式不正确'
},
validate(value, args) {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
};

Validator.extend('isMobile',myCustomRule);

定义通过后台接口验证的规则:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Validator.extend('sku', {
getMessage: field => field + '已存在!',
validate: (value, args) => {
return this.checkSku(value);
}
}, {
immediate: false //是否实时验证
});

checkSku(val) {
return this.$api.checkSku(val).then(res => {
if (res.code == 200) {
return true;
} else {
return false;
}
});
},

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:文档