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