<template>
  <div class="FormPage">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="form.name" placeholder="请输入" maxlength="10" />
      </el-form-item>
      <el-form-item label="手机号码:" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入" maxlength="11" />
      </el-form-item>
      <el-form-item label="身份证号码:" prop="IdCard">
        <el-input v-model="form.IdCard" placeholder="请输入" maxlength="18" />
      </el-form-item>
      <el-form-item label="整数:" prop="num">
        <el-input v-model="form.num" placeholder="请输入" maxlength="10" />
      </el-form-item>
      <el-form-item label="汉字:" prop="hz">
        <el-input v-model="form.hz" placeholder="请输入" maxlength="10" />
      </el-form-item>
      <div class="forTitle">for循环列表的表单校验</div>
      <div class="list" v-for="(item,index) in form.list" :key="item.index">
        <el-row :gutter="20" type="flex">
          <el-col :span="11">
            <el-form-item label="标题:" :prop="`list.${index}.title`" :rules='rules.title'>
        <el-input v-model="item.title" placeholder="请输入" maxlength="10" />
      </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="类型:" :prop="`list.${index}.type`" :rules='rules.type'>
        <el-input v-model="item.type" placeholder="请输入" maxlength="10" />
      </el-form-item>
          </el-col>
        </el-row>
      </div>

    </el-form>
    <div>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>
    
<script>
export default {
  name: "FormPage",
  data() {
    //身份证号格式校验
    var isCardId = (rule, value, callback) => {
      if (value) {
        const reg =
          /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
        const card = reg.test(value);
        if (!card) {
          callback(new Error("身份证号格式有误！"));
        } else {
          callback();
        }
      } else {
        callback();
      }
      callback();
    };
    //手机号格式校验
    var validatorPhone = function (rule, value, callback) {
      if (value) {
        if (!/^1\d{10}$/.test(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      callback();
    };
    return {
      form: {
        name: '',
        phone: "",
        IdCard: "",
        num: '',
        hz: '',
        list: [
          {
            title: '',
            type: '',
          },
          {
            title: '',
            type: '',
          },
        ],
      },
      // 表单校验
      rules: {
        name: [{
          required: true,
          message: "请输入姓名",
          trigger: ["blur", "change"]
        },],
        IdCard: [
          {
            validator: isCardId,
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"]
          },
          {
            validator: validatorPhone,
            trigger: ["blur", "change"]
          }
        ],
        num: [
          {
            required: true,
            message: "请输入数字",
            trigger: ["blur", "change"]
          },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' },
        ],
        hz: [
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: "请输入汉字", trigger: "blur" }
        ],

        title: [{
          required: true,
          message: "请输入标题",
          trigger: ["blur", "change"]
        },],
        type: [{
          required: true,
          message: "请输入类型",
          trigger: ["blur", "change"]
        },],

      },
    };
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      console.log(this.form, 'this.form')
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log('提交!')
        }
      });
    },
  },
};
</script>
  
<style scoped>
.forTitle{
margin-bottom: 20px;
}
</style>