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

格式:

const validator = {
  getMessage(field, args) {
    //定义默认错误提示
    //返回错误提示
  },
  validate(value, args) {
        // 返回一个 Boolean 值或者一个 Promise对象.
  }
};

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

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

列子:

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);

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

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中引入文件

    ...
    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);
  • 在组件中自定义规则

    <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"

<input type="text" name="name" data-vv-as="姓名" v-validate="'required|chinese'" data-vv-validate-on="blur" v-model="name">

VeeValidate表单验证组件Ajax成功后消除验证错误

methods:{
    clear(){
        let that = this;
        new Promise(function (resolve, reject) {
            resolve('Reset Form!');
            that.clearForm();
        }).then(() => {
            that.$validator.reset();
        });
    },
    clearForm(){
        //do anything...
    }
}

Reference:文档

标签: Vue, VeeValidate

添加新评论