Mira directamente el código
<template>
<div class="page-content">
<div class="page-body">
<el-card class="form-container" shadow="never" align-center>
<el-steps :active="active" finish-status="success" align-center>
<el-step title="上传头像"></el-step>
<el-step title="个人信息"></el-step>
<el-step title="专业信息"></el-step>
<el-step title="证书信息"></el-step>
</el-steps>
<!-- 个人信息 -->
<el-form ref="form" :model="form" label-width="120px" :rules="rules" style="width: 600px" size="small">
<div class="info" v-if="active===1">
<el-form-item label="上传头像" prop="imageUrl">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload" >
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</div>
<div class="info" v-if="active===2">
<el-form-item label="真实姓名" prop="username">
<el-input v-model="form.username" maxlength="10" placeholder="请输入真实姓名" clearable></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="tell">
<el-input v-model="form.tell" maxlength="20" placeholder="请输入手机号码" clearable></el-input>
</el-form-item>
<el-form-item label="身份证" prop="indentity">
<el-input v-model="form.indentity" maxlength="20" placeholder="请输入身份证" clearable></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" maxlength="20" placeholder="请输入邮箱" clearable></el-input>
</el-form-item>
<el-form-item label="学历" prop="education">
<el-select v-model="form.education" placeholder="请选择学历" clearable filterable>
<el-option label="小学" value="0"></el-option>
<el-option label="初中" value="1"></el-option>
<el-option label="高中" value="2"></el-option>
<el-option label="大学" value="3"></el-option>
</el-select>
</el-form-item>
</div>
<div class="info" v-if="active===3">
<el-form-item label="专长领域:" prop="area">
<el-checkbox :indeterminate="form.isIndeterminate" v-model="form.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<br>
<el-checkbox-group v-model="form.area" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in form.cities" :label="city.menu" :key="city.id">{
{
city.menu}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="专业:">
<el-checkbox-group v-model="form.type">
<el-checkbox label="机电一体化" name="type"></el-checkbox>
<el-checkbox label="计算机" name="type"></el-checkbox>
<el-checkbox label="美术" name="type"></el-checkbox>
<el-checkbox label="测试" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="从业资质:" prop="quality">
<br>
<el-radio-group v-model="form.quality">
<el-radio :label="0" class="qualityStyle">国家二级咨询师</el-radio>
<el-radio :label="1" class="qualityStyle">国家三级咨询师</el-radio>
<el-radio :label="2" class="qualityStyle">注册系统咨询师</el-radio>
<el-radio :label="3" class="qualityStyle">注册系统督导师</el-radio>
<el-radio :label="4" class="qualityStyle">其他</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否是学生:" prop="student">
<el-radio-group v-model="form.student">
<el-radio v-for="item in form.isStudent" :label="item.value" :key="item.value">{
{
item.label}}</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div class="info" v-if="active===4">
<el-form-item label="证书编号" prop="number">
<el-input type="text" v-model="form.number" placeholder="请输入证书编号" clearable></el-input>
</el-form-item>
<el-form-item label="从业年限" prop="time">
<el-input type="text" v-model="form.time" placeholder="请输入从业年限" clearable></el-input>
</el-form-item>
<el-form-item label="个人简介" prop="instroduce">
<el-input type="textarea"
maxlength="50"
show-word-limit
:autosize="{ minRows: 3, maxRows: 3 }"
v-model="form.instroduce"
placeholder="请输入个人简介"
></el-input>
</el-form-item>
</div>
<el-form-item style="text-align: center">
<el-button type="primary" size="medium" @click="pre" v-if="active>1">上一步</el-button>
<el-button type="primary" size="medium" @click="next" v-if="active<4">下一步</el-button>
<el-button type="primary" size="medium" @click="onSubmit" v-if="active === 4">保存</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
const cityOptions = [
{
id: '1',
menu: '婚姻家庭'
},
{
id: '2',
menu: '情绪管理'
},
{
id: '3',
menu: '恋爱心理'
},
{
id: '4',
menu: '个人成长'
},
{
id: '5',
menu: '人际关系'
},
{
id: '6',
menu: '心理健康'
},
{
id: '7',
menu: '职场心理'
},
{
id: '8',
menu: '亲子教育'
},
{
id: '9',
menu: '性心理'
},
];
const isStudentUser = [
{
label: "是", value: 1 },
{
label: "否", value: 0 }
];
export default{
components: {
},
data() {
// 手机号验证
const validatePhone = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号"));
} else {
if (!/^1[3456789]\d{9}$/.test(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
}
};
// 身份证验证
const isCardID = (rule, value, callback) => {
if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
callback(new Error('你输入的身份证长度或格式错误'))
}
//身份证城市
const aCity = {
11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };
if (!aCity[parseInt(value.substr(0, 2))]) {
callback(new Error('你的身份证地区非法'))
}
// 出生日期验证
const sBirthday = (value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" + Number(value.substr(12, 2))).replace(/-/g, "/"),
d = new Date(sBirthday)
if (sBirthday !== (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {
callback(new Error('身份证上的出生日期非法'))
}
// 身份证号码校验
let sum = 0,
weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
codes = "10X98765432"
for (let i = 0; i < value.length - 1; i++) {
sum += value[i] * weights[i];
}
const last = codes[sum % 11]; //计算出来的最后一位身份证号码
if (value[value.length - 1] !== last) {
callback(new Error('你输入的身份证号非法'))
}
callback()
};
// 邮箱验证
const checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (!value) {
return callback(new Error('邮箱不能为空'))
}
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'))
}
}
return {
// 默认定义步骤条
active: 1,
form: {
// 默认选中（专长领域）
area: [],
// 专业
type: [],
// 学生
student: '',
// 是否学生
isStudent: isStudentUser,
// 全选
checkAll: false,
// 专长领域数据
cities: cityOptions,
// 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果,负责样式控制
isIndeterminate: true,
// 默认选中（从业资质）
quality: 0,
// 头像
imageUrl: '',
// 真实姓名
username : '',
// 手机号码
tell: '',
// 身份证
indentity: '',
// 邮箱
email: '',
// 证书编号
number:'',
// 从业年限
time:'',
// 个人简介
instroduce:''
},
rules: {
imageUrl: [{
required: true, message: '请上传头像' }],
username: [{
required: true, message: '请输入姓名' }],
tell: [{
required: true, validator: validatePhone, trigger: 'change'}],
// trigger: 'blur' blur失去焦点 (比如输入框里。校验文本框是否为空)
// trigger: 'change' change数据改变 (需要手动选择的东西，用change)
// 没有进行任何输入时，不会触发change，但一定会触发blur事件
// 第一种身份证校验
// indentity: [
// { required: true, message: '请输入身份证' },
// {
// pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
// message: '请填写正确的身份证'
// }
// ],
// 第二种身份证校验
indentity: [
{
required: true, message: '身份证不能为空·', trigger: 'blur' },
{
validator: isCardID, trigger: 'blur' }
],
email: [
{
required: true, validator: checkEmail, trigger: 'blur' }
],
area: [{
required: true, message: '请选择专长领域' }],
student: [{
required: true, message: '请选择是否是学生' }],
number: [{
required: true, message: '请输入证书编号' }],
time: [{
required: true, message: '请输入从业年限' }],
instroduce: [{
required: true, message: '请输入个人简介' }],
},
}
},
created() {
},
watch: {
"form.tell": function(curVal, oldVal) {
if (!curVal) {
this.form.tell = "";
return false;
}
// 实时把非数字的输入过滤掉
this.form.tell = curVal.match(/\d/gi) ? curVal.match(/\d/gi).join("") : "";
}
},
methods: {
// 保存
onSubmit() {
this.$refs.form.validate(valid => {
if (valid) {
console.log(this.form, 'this.form')
}
})
},
// 获取上传文件
handleAvatarSuccess(res, file) {
console.log(file, 'file')
this.getBase64(file.raw).then(res => {
this.form.imageUrl = res
console.log(res, 'this.form.imageUrl')
})
// this.form.imageUrl = URL.createObjectURL(file.raw); 官方写法
},
// 图片转base64
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},
// 判断图片
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
// 全选 --- 当绑定值变化时触发的事件
handleCheckAllChange(val) {
console.log(val, 'val') //val的值是一个布尔值，点中全选为false，取消全选为true
this.form.cities.forEach(item=>{
//当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
this.form.area.push(item.menu) // 如果上面label绑定的是menu,这里也要是menu
})
this.form.area = val ? this.form.area : []; //三元表达式，如果val的值为true，那么就把当前默认选中的值赋值给自身，这样页面页面上所有的元素就都选中了。如果为false，就是取消全选
this.form.isIndeterminate = false; //官网说这是个样式控制，是来控制，什么时候半选的，要不要都无所谓，看你需求
},
// checkbox选中 --- 当绑定值变化时触发的事件
handleCheckedCitiesChange(value) {
console.log(value, 'value')
const checkedCount = value.length; // 选中值的长度
this.form.checkAll = checkedCount === this.form.cities.length; //如果选中值的长度和源数据的长度一样，返回true，就表示你已经选中了全部checkbox，那么就把true赋值给this.checkAll
this.form.isIndeterminate = checkedCount > 0 && checkedCount < this.form.cities.length; //同全选按钮事件里面的那个样式控制
},
// 下一步
next() {
this.$refs.form.validate(valid => {
console.log(valid, 'valid')
if (valid) {
if (this.active++ > 3) this.active = 1;
}
})
},
// 上一步
pre() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.active-- < 2) this.active = 1;
}
})
}
}
}
</script>
<style>
.info{
margin-top: 50px;
}
.form-container {
/*position: absolute;*/
/*left: 0;*/
/*right: 0;*/
width: 800px;
padding: 35px 35px 15px 35px;
margin: 20px auto;
}
.qualityStyle{
margin-bottom: 5PX;
}
/*element ui 上传图片样式*/
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
¡Haga modificaciones sobre la base del blogger [creo en el poder del pensamiento lento]!