zcjlgcs-ui/src/views/components/zhuce/baseInfo.vue

<template>
	<div>
		<el-form ref="registerForm" label-position="left" label-width="100px" :model="registerForm"
			:rules="registerRules">
			<el-form-item label="企业名称" prop="qyname">
				<el-input v-model="registerForm.qyname" type="text" auto-complete="off"
					placeholder="请输入正确的公司全称"></el-input>
			</el-form-item>
			<el-form-item label="用户名" prop="username">
				<el-input v-model="registerForm.username" auto-complete="off"
					placeholder="用户名长度3-20位,只能输入字母、数字、下划线,以字母开头"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="registerForm.password" type="password" auto-complete="off"
					placeholder="6-20位英文（区分大小写）、数字的组合"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="password">
				<el-input v-model="registerForm.password" type="password" auto-complete="off"
					placeholder="请再输入一遍上面的密码"></el-input>
			</el-form-item>
			<el-form-item label="负责人姓名" prop="name">
				<el-input v-model="registerForm.name" auto-complete="off" placeholder="请输入负责人姓名"></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="photo">
				<el-input v-model="registerForm.photo" auto-complete="off" placeholder="请填写11位有效的手机号码"></el-input>
			</el-form-item>
			<el-form-item label="电子邮箱" prop="lxryx">
				<el-input v-model="registerForm.lxryx" auto-complete="off" placeholder="请填写有效的电子邮箱地址"></el-input>
			</el-form-item>
			<el-form-item label="邮政编码" prop="yzbm">
				<el-input v-model="registerForm.yzbm" auto-complete="off" placeholder="请输入邮政编码"></el-input>
			</el-form-item>
			<el-form-item label="营业执照" prop="yyzz">
				<!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
					:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload> -->
			</el-form-item>
			<el-form-item style="width:100%;">
				<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click="handleRegister">
					下一步
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "baseInfo",
		data() {
			//用户名格式验证
			var userName = (rule, value, callback) => {
				const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,19}$/;
				if (regex.test(value) == true) {
					callback();
				} else {
					callback(new Error('用户名长度3-20位,只能输入字母、数字、下划线,以字母开头'));
				}

			};
			//密码格式验证
			var passWord = (rule, value, callback) => {
				const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/
				if (regex.test(value) == true) {
					callback();
				} else {
					callback(new Error('6-20位英文（区分大小写）、数字的组合'));
				}
			}
			//两次密码是否一致验证
			const equalToPassword = (rule, value, callback) => {
				if (this.registerForm.password !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};
			//手机号验证
			const phone = (rule, value, callback) => {
				const regex = /^1[3-9]\d{9}$/
				if (regex.test(value) == false) {
					callback(new Error("手机号码不正确"));
				} else {
					callback();
				}
			};
			//电子邮箱验证
			const email = (rule, value, callback) => {
				const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
				if (regex.test(value) == false) {
					callback(new Error("电子邮箱不正确"));
				} else {
					callback();
				}
			};
			return {
				loading:false,//按钮加载
				registerForm: {
					qyname: null, //企业名称
					username: null, //用户名
					password: null, //密码
					qrpassword: null, //确认密码
					name: null, //负责人姓名
					photo: null, //手机号码
					lxryx: null, //电子邮箱
					yzbm: null, //邮政编码
					yyzz: null, //营业执照
				},
				registerRules: {
					qyname: {
						required: true,
						message: '公司名称不能为空',
						trigger: ['blur', 'change']
					},
					username: [{
							required: true,
							message: '用户名不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: userName,
							trigger: ['blur', 'change']
						}
					],
					password: [{
							required: true,
							message: '密码不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: passWord,
							trigger: ['blur', 'change']
						}
					],
					qypassword: [{
							required: true,
							message: '确认密码不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: equalToPassword,
							trigger: ['blur', 'change']
						}
					],
					name: {
						required: true,
						message: '负责人姓名不能为空',
						trigger: ['blur', 'change']
					},
					photo: [{
							required: true,
							message: '手机号码不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: phone,
							trigger: ['blur', 'change']
						}
					],
					lxryx: [{
							required: true,
							message: '电子邮箱不能为空',
							trigger: ['blur', 'change']
						},
						{
							validator: email,
							trigger: ['blur', 'change']
						}
					],
					yzbm: {
						required: true,
						message: '邮政编码不能为空',
						trigger: ['blur', 'change']
					},
					yyzz: {
						required: true,
						message: '请上传营业执照',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			handleRegister() {
				 this.$emit('submitSuccess', 1)
				// this.$refs.registerForm.validate(valid => {
				// 	if (valid) {
					
				// 	} else {

				// 	}
				// })
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.avatar-uploader .el-upload {
		border: 1px dashed #eee;
		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>