element的form表单校验(身份证号、手机号、整数、汉字、for循环列表)

复制代码
<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>
相关推荐
你脸上有BUG10 分钟前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴25 分钟前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆34 分钟前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术39 分钟前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪1 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚1 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
新中地GIS开发老师2 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学
Shimeng_19892 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端