vue+element 表单验证

 

效果图

 

 

 注意：如果是弹窗式的表单验证，记得每次退出退出重置一下表单。否则会每次进去都跳出验证影响体验

<template>
  <div class="formValidator">
    <div v-for="(item,index) in dataList" :key="index">
      <el-form :model="dataList[index]" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="dataList[index].name"></el-input>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input v-model="dataList[index].desc"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号码"
          v-for="(phoneItem,phoneIndex) in dataList[index].phoneNumbers"
          :key="phoneIndex"
          :rules="[{ required: true, validator: phoneNumberValidator, trigger: ['blur','change'] }]"
          :prop="'phoneNumbers.' + phoneIndex + '.phoneNumber'"
        >
          <el-input
            v-model.trim="phoneItem.phoneNumber"
            onkeyup="this.value=this.value.replace(/\D/g,'')"
            maxlength="11"
          ></el-input>
          <el-link
            v-if="item.phoneNumbers.length > 1"
            type="primary"
            :underline="false"
            style="margin-left:10px"
            @click.prevent="removePhoneNumber(index,phoneIndex)"
          >删除</el-link>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" :underline="false" @click.prevent="addPhoneNumber(index)">增加手机号</el-link>
        </el-form-item>
      </el-form>
    </div>

    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </div>
</template>

<script>
export default {
  name: "formValidator",
  data() {
    let that = this
    // 校验 input 的 函数 与rules里面 validator的参数 
    function nameValidator(rule, value, callback) {
      if (value.trim() === "") {
        callback(new Error("活动名称必填"));
      } else {
        callback();
      }
    }
    function descValidator(rule, value, callback) {
      if (value.trim() === "") {
        callback(new Error("活动形式必填"));
      } else {
        callback();
      }
    }
    function phoneNumberValidator(rule, value, callback) {
      // 判断手机号码是否重复
      let repeatPhoneNum = that.dataList.map(item => {
        if(!!item.phoneNumbers){
          return item.phoneNumbers.filter(itemFilter => itemFilter.phoneNumber === value).length > 1
        }
      })
      // console.log(repeatPhoneNum)
      if (value.trim() === "") {
        callback(new Error("手机号码必填"));
      } else if (value.length < 11) {
        callback(new Error("手机号格式错误"));
      } else if(repeatPhoneNum.includes(true)){
        callback(new Error("新增号码重复"));
      }else {
        callback();
      }
    }
    return {
      // 手机号验证 手机号验证是v-for循环 所以应用的是官网案例   单独v-for 的校验需要注意 :prop里的值
      phoneNumberValidator: phoneNumberValidator,
      //数据列表
      dataList: [
        {
          name: "",
          desc: "",
          phoneNumbers: [
            {
              phoneNumber: ""
            }
          ]
        }
      ],
      // 用来校验表单的rules
      rules: {
        name: [
          {
            validator: nameValidator,
            required: true,
            trigger: ["blur", "change"]
          }
        ],
        desc: [
          {
            validator: descValidator,
            required: true,
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
　　//点击保存按钮进行所有表单验证
    submitForm(ref) {
      // 获取到表单
      let el = this.$refs.ruleForm;
      let validate  // 用来存放是否表单验证通过，true 通过 ， false 不通过 
      if (el.length > 0) {
      el.forEach((item, index) => {
          item.validate(valid => {
            validate = valid
          });
        });
      }
　　　//在里面可以打印一下 el 里面的mode 代表着form 表单中的所填写的字段及内容
      console.log(el, validate);
    },
    // 添加手机号
    addPhoneNumber(index) {
      this.dataList[index].phoneNumbers.push({
        phoneNumber: ""
      });
    },
    // 删除手机号
    removePhoneNumber(index1,index2){
      this.dataList[index1].phoneNumbers.splice(index2,1)
    }
  }
};
</script>