<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>