头像在线制作网站_维护网站信息_网络营销实训总结报告_百度网址大全 旧版本

1.登录页面（opType.value==0）

2.注册页面（opType.value==1）

3.注意
el-form-item中的prop对应的是rules里面的key值

<el-form-itemlabel="邮箱"prop="email"label-width="100px">
</el-form-item>        

4.代码

<template><div><div class="box"><el-form:model="formData":rules="rules"ref="formDataRef"label-width="80px"@submit.prevent><div class="title">信息</div><!--账号--><el-form-itemlabel="邮箱"prop="email"label-width="100px"><span class="iconfont icon-user"></span><el-inputclearableplaceholder="请输入邮箱"v-model.trim="formData.email"size="larger"><template #prefix><span class="iconfont icon-account"></span></template></el-input></el-form-item><template v-if="opType==1"><!-- 密码 --><el-form-itemlabel="密码"prop="password"size="larger"label-width="100px"><el-inputclearableplaceholder="请输入密码"v-model.trim="formData.password"size="larger"showPassword><template #prefix><span class="iconfont icon-password"></span></template></el-input></el-form-item></template><!--input输入--><!-- 注册才显示 --><template v-if="opType==0"><!--昵称--><el-form-itemlabel="昵称"prop="nickName"label-width="100px"><el-inputclearableplaceholder="请输入你的昵称"v-model.trim="formData.nickName"><template #prefix><span class="iconfont icon-account"></span></template></el-input></el-form-item><!-- 注册密码 --><el-form-itemlabel="密码"prop="rigPassword"label-width="100px"><el-inputclearableplaceholder="请输入你的密码"v-model.trim="formData.rigPassword"><template #prefix><span class="iconfont icon-password"></span></template></el-input></el-form-item><!-- 重复密码 --><el-form-itemlabel="重复密码"prop="rePassword"label-width="100px"><el-inputclearableplaceholder="请再次输入你的密码"v-model.trim="formData.rePassword"><template #prefix><span class="iconfont icon-password"></span></template></el-input></el-form-item><!-- 验证码 --><el-form-itemlabel="验证码"prop="code"label-width="100px"><div class="code"><el-inputclearableplaceholder="请输入验证码"v-model.trim="formData.code"><template #prefix><span class="iconfont icon-checkcode"></span></template></el-input><el-buttontype="primary"@click=""class="sendCode">发送验证码</el-button></div></el-form-item></template></el-form><div class="no-account"><template v-if="opType==1"><el-checkbox>记住我</el-checkbox><ahref="javascript:void(0)"@click="showPanel(0)">去注册</a></template><template v-if="opType==0"><ahref="javascript:void(0)"@click="showPanel(1)">已有帐号？去登录</a></template></div><el-buttontype="primary"@click="doSubmit"class="btn"><span v-if="opType==1">登录</span><span v-if="opType==0">注册</span></el-button></div></div>
</template><script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
// 默认为登陆页面
const opType = ref(1);
const formData = ref({});
const formDataRef = ref();// 转换页面
const showPanel = (type) => {opType.value = type;
};
// 判断注册重复密码是不是和注册密码一致
const checkRePassword = (rule, value, callback) => {if (value != formData.value.rigPassword) {callback(new Error(rule.message));} else {callback();}
};// 规则
const rules = {email: [{ required: true, message: "请输入邮箱" },{ validator: proxy.Verify.email, message: "请输入正确的邮箱" },],password: [{ required: true, message: "请输入密码" }],nickName: [{ required: true, message: "请输入昵称" }],rigPassword: [{ required: true, message: "请输入邮箱" },{validator: proxy.Verify.password,message: "密码只能是数字，字母，特殊字符8-18位",},],rePassword: [{ required: true, message: "请再次输入密码" },{ validator: checkRePassword, message: "两次输入密码不一致" },],
};const doSubmit = () => {// 表单验证formDataRef.value.validate(async (valid) => {if (!valid) {return;}let params = {};Object.assign(params, formData.value);// 注册if (opType.value == 0 ) {params.password = params.rigPassword;delete params.rigPassword;delete params.rePassword;}// 登录，将用户信息与VueCookies中比对if (opType.value == 1) {let cookieLoginInfo = proxy.VueCookies.get("loginInfo");let cookiePassword =cookieLoginInfo == null ? null : cookieLoginInfo.password;if (params.password !== cookiePassword) {params.password = params.password;}}let url = null;if (opType.value == 0) {// 注册url处理} else if (opType.value == 1) {// 登录url处理} //TODO});
};
</script><style lang="scss" scoped>
.box {max-width: 500px;width: 100%;padding: 20px 20px 20px 0;margin: 100px auto;background-color: #f6f6f6;border: 1px solid #eee;.title {font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px;color: #616060;}.code {width: 100%;display: flex;.sendCode {margin-left: 5px;}}:deep(.el-form-item__label) {width: 100px;}
}
.no-account {width: 100%;display: flex;justify-content: space-between;margin: 10px 0;padding-left: 20px;a {text-decoration: none;color: rgb(48, 142, 236);font-size: 14px;}
}
.btn {width: 100%;
}
</style>

5.Verify.js

const regs = {email: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/password: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*_]{8,}$/
}const verify = (rule, value, reg, callback) => {if (value) {if (reg.test(value)) {callback()} else {callback(new Error(rule.message))}} else {callback()}
}
export default {email: (rule, value, callback) => {return verify(rule, value, regs.email, callback)}password: (rule, value, callback) => {return verify(rule, value, regs.password, callback)}
}