Vue编写登录注册页面前端校验

登录注册校验

template页面

 <div class="app-login"><!--登录  --><div class="form"><el-form ref="form" size="large" autocomplete="off" v-if="isLogin" :model="registerData" :rules="rules"label-width="120px"><el-form-item><h1>登录</h1></el-form-item><el-form-item label="用户名" prop="username"><el-input :suffix-icon="Wicon" maxlength="5" :prefix-icon="User"  v-model="registerData.username" type="username" autocomplete="off" /></el-form-item><el-form-item label="密码" prop="password"><el-input :suffix-icon="Wicon2" maxlength="8" :prefix-icon="Lock" show-password v-model="registerData.password" type="password" autocomplete="off" /></el-form-item><div class="bt"><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button><el-button @click="resetForm()">重置</el-button><el-button @click="isLogin = false">去注册</el-button></el-form-item></div></el-form><!--注册  --><el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules" label-width="120px"><el-form-item><h1>注册</h1></el-form-item><el-form-item label="账户" prop="username"><el-input :prefix-icon="User" maxlength="5" :suffix-icon="Wicon" v-model="registerData.username" type="username"autocomplete="off" /></el-form-item><el-form-item label="密码" prop="password"><el-input :prefix-icon="Lock" :suffix-icon="Wicon2"  maxlength="8" show-password v-model="registerData.password" type="password"autocomplete="off" /></el-form-item><el-form-item label="确认密码" prop="repassword"><el-input :prefix-icon="Lock" :suffix-icon="Wicon3" maxlength="8"  show-password   v-model="registerData.repassword" type="password"autocomplete="off" /></el-form-item><div class="bt"><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button><el-button @click="resetForm()">重置</el-button><el-button @click="isLogin = true">去登录</el-button></el-form-item></div></el-form></div></div>

script

import { User, Lock, CircleCheck, CircleCloseFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
// 默认是登录
const isLogin = ref(true)
const registerData = ref({username: '',password: '',repassword: ''
})
// 图标
const Wicon = ref('')
const Wicon2 = ref('')
const Wicon3 = ref('')// 用户名自定义校验icon
const checkicon = (rule, value, callback) => {if (registerData.value.username.length >= 2 && registerData.value.username.length <= 8) {Wicon.value = CircleCheck}else if(registerData.value.username.length === 0){Wicon.value = CircleCloseFilledcallback(new Error("请输入用户名"))} else {Wicon.value = CircleCloseFilledcallback(new Error("用户名需2到8位"))}
}
// 密码自定义校验
const checkicon2 = (rule, value, callback) => {if (registerData.value.password.length >= 4 && registerData.value.password.length <= 8) {Wicon2.value = CircleCheck} else if(registerData.value.password.length === 0){Wicon2.value = CircleCloseFilledcallback(new Error("请输入密码"))}  else {Wicon2.value = CircleCloseFilledcallback(new Error("密码需4到8位"))}
}// 校验确认密码函数
const checkPassword = (rule, value, callback) => {if (registerData.value.repassword == '') {Wicon3.value= CircleCloseFilledcallback(new Error("请输入确认密码"))} else if (registerData.value.repassword !== registerData.value.password) {Wicon3.value = CircleCloseFilledcallback(new Error("两次密码不一致"))} else {Wicon3.value = CircleCheckcallback()}
}
// 定义表单校验规则
const rules = {username: [{ required: true, validator: checkicon,trigger: 'change' }],password: [{ required: true, validator: checkicon2, trigger: 'change' }],repassword: [{ validator: checkPassword, trigger: 'change' }]}
// 清空函数
const resetForm = (value) => {registerData.value.username = '';registerData.value.password = '';registerData.value.repassword = '';
}

css部分，个人审美较差。

.app-login {border-radius: 30px;height: 500px;width: 500px;display: flex;justify-content: space-around;align-items: flex-start;flex-direction: column-reverse;border: 2px solid #ccc;padding: 8px;margin: -200px;// background-image: url(https://p4.itc.cn/q_70/images03/20230308/8f6053ee5e6348febfda49f7c31ebdf6.jpeg);// background-repeat: no-repeat;// background-size: cover;font-family: "Helvetica Neue"
}h1 {padding-left: 80px;margin-bottom: 20px;
}.form {padding: 20px;flex: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;
}.bt {margin-top: 50px;
}