vue form check 表单验证的实现代码

vue-form-check  （基于vue的表单验证）具体实现代码如下所述：

安装

// 安装npm i vue-form-check -S

引用

// 引用(eg. 在工程的main.js下)import vueFormCheck from 'vue-form-check'Vue.use(vueFormCheck)

调用

this.$checkForm(current, config)@paramscurrent 是当前校验对象config 是校验规则对象config.alias   别名config.type   配置项数据类型config.required 是否必填config.rule   正则校验config.depend  先决条件（省事可以在callback里直接判断，推荐写，true校验本项；false不校验本项）config.callback 灵活校验（rule同时出现，只处理callback，参数是当前值，true校验通过；false校验不通过）@return object 对象不通过的话  {alias: '电话', type: 'rule'}  alias是配置的别名，type可以是['type'|'required'|'rule']校验通过的话 {} 空对象ps. 验证表单可以写在mixin里，这里简单处理直接写在组件里了

Component

// 使用例子new Vue({ data() {  return {   params: {    id: '1234',    person: {      name: 'jackie',      age: '27',      phone: '18266666666',      home: ['罗湖区田心村']    }   }  } }, methods: {  submit() {   //...   console.log('submit success');  },  check() {   let obj = this.$checkForm(this.params, {      id: {       alias: 'id',       type: 'string'      },      // 必填校验      'person.name': {        alias: '学校',        type: 'string',        required: true      },      // 正则校验      'person.phone': {        alias: '电话',        type: 'string',        rule: /^1[345678][0-9]{9}$/      },      // 灵活校验，如数值、日期区间验证      'person.age': {        alias: '年龄',        callback(value) {          if (value < 30 && value > 18) {            return true;          }          return false;        }      },      // 先决校验，如果电话等于以下，校验地址信息      'person.home': {        alias: '方向',        type: 'array',        required: true,        depend() {          if (this.params.person.phone === '18210517463') {           return true;          }          return false;        }     }    });    const length = Object.keys(obj).length;    if (length === 0) {      return this.submit();    }    switch (obj.type) {      case 'type':        this.$alert(`${obj.alias}的类型定义错误`, '提示');        break;      case 'required':        this.$alert(`${obj.alias}是必填项`, '提示');        break;      case 'rule':        this.$alert(`${obj.alias}的输入不符合规范`, '提示');        break;      default:        break;    }  } }});

补充：vue-form表单验证是否为空值

重点部分：

点击表单的 submit按钮 触发form 部分 @submit=”submit”事件：

submit事件 定义在js部分：