登錄注冊校驗

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

效果圖

本文是自己的學習雜記，自己對前端Vue+elementUi+的練習。