vee-validate 自定义验证规则

Posted on | Edited on | In |

在使用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:文档