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

// 安装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里，这里简单处理直接写在组件里了

// 使用例子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;    }  } }});

form @submit.prevent=”submit” <form @submit.prevent="submit">    <input type="text" v-model="userName" placeholder="请输入你的姓名" class="name-style" maxlength="20"/>    <div class="sex">      <select v-model="selectedSex">        <option>boy</option>        <option selected = "selected">girl</option>      </select>    </div>       <input type="text" v-model="phoneNumber" placeholder="请输入你的手机号" class="phone-number-style"/>    <div class="guide-style">      <select v-model="selectedGuild">        <option selected="selected" value="">请选择一个导购： </option>        <option v-for="guild in guilds" value ="{{ guild.name }}">{{ guild.name }}</option>      </select>    </div>    <input type="submit" value ="注册" class="register-style"/>  </form>   data () {    return {    userName: '',  //请输入你的姓名    selectedSex: '',//选择性别    phoneNumber: '',//请输入你的手机号    guilds: [],       selectedGuild: '' ///请选择一个导购    }  },  methods: { //1.重点是这个方法 submit () {} - form @submit.prevent="submit" -重点是这个方法 submit () {}, //2.可以在这里向服务器发送数据   submit () {    if (!this.userName) {      showToast('请输入姓名!')      return false    }    if (!this.phoneNumber) {      showToast('请输入手机号码!')      return false    }    if (!checkTel(this.phoneNumber)) {      showToast('手机号格式不正确')      return false    }    if (!this.selectedGuild) {      showToast('请选择导购!')      return false    }    return true    }  }