登录注册-表单验证
本文主要实现简单的前端邮箱注册登录以及发送验证码的功能
登录
页面：
<div class="login"> <a-form layout="inline" //表单布局：水平 ref="formRef" //获取整个表单，用以认证登录 :rules="rules" //表单验证的规则 :model="formState" //表单数据对象 > <a-form-item class="info"> 还没有账号？ <router-link to="/register" class="to-reg">立即去注册</router-link> </a-form-item> <a-form-item class="email" name="username"> <a-input v-model:value="formState.username" placeholder="请输入邮箱"> </a-input> </a-form-item> <a-form-item class="passwd" name="password"> <a-input v-model:value="formState.password" type="password" autocomplete="off" placeholder="请输入密码" > //autocomplete 禁用自动完成功能
</a-input>
</a-form-item>
<a-form-item class="login-btn">
<a-button @click="onLogin" :class="{onedit: btnActive}">登录</a-button>
</a-form-item>
</a-form>
</div>
js实现：
export default defineComponent({ name: "Login", setup() { let btnActive = ref(false); //登录按钮的动态样式 const formRef = ref(); const formState = reactive({ username: "", password: "" }); let validateEdit = async (rule, value) => { // console.log("validateEdit", value, value === ""); if (value === "") { btnActive.value = false; } else { btnActive.value = true; } return Promise.resolve(); }; //表单验证规则 const rules = { username: [ {required: true, message: '输入的邮箱地址不能为空', trigger: ['change','blur']}, {type: 'email', message: '请输入有效的邮箱地址', trigger: ['change','blur']}, {validator: validateEdit, trigger: 'change' } ], password: [ {required: true, message: '输入的密码不能为空', trigger: ['change','blur']}, { validator: validateEdit, trigger: "change" }, ], };
//登录功能 const onLogin = () => { formRef.value .validate() //触发表单验证 .then(() => { axios.post(config.weburl + '/user/login', qs.stringify({ //qs.stringify是把一个参数对象格式化为一个字符串。 email:formState.username, password: formState.password })).then(function (response) { // console.log('login:',response); if(response.data.status == 0){ storage.set('tools_user_id',response.data.id)； router.push({ path: '/toolshome' }) }else{ message.error('登录失败'); } }).catch(function (error) { console.log(error); }); }) .catch((error) => { console.log('error', error); }); }; return { btnActive, formRef, formState, rules, onLogin } } });
注册
页面：
<div class="register"> <a-form layout="inline" ref="formRef" :rules="rules" :model="formState" > <a-form-item class="info"> 已有账号？ <router-link to="/login" class="to-reg">去登录</router-link> </a-form-item> <a-form-item class="email" name="username"> <a-input v-model:value="formState.username" placeholder="请输入邮箱"> </a-input> </a-form-item> <a-form-item class="verification" name="verification"> <a-input v-model:value="formState.verification" placeholder="请输入邮箱收到的验证码"> </a-input> <a-button @click="sendVerifyCode" :class="{onedit: sendActive}" :disabled="islock">{{sendVerifyBtn}}</a-button> </a-form-item> <a-form-item class="passwd" name="password"> <a-input v-model:value="formState.password" type="password" autocomplete="off" placeholder="请输入密码" > </a-input> </a-form-item> <a-form-item class="passwd" name="password2"> <a-input v-model:value="formState.password2" type="password" autocomplete="off" placeholder="请再次输入密码" > </a-input> </a-form-item> <a-form-item class="register-btn"> <a-button @click="onRegister" :class="{onedit: btnActive}">注册</a-button> </a-form-item> </a-form> </div>
js实现：
export default defineComponent({ name: "Register", setup() {
let btnActive = ref(false); let sendActive = ref(false); const formRef = ref(); let verifyCode = ''; let verfy = ''; const formState = reactive({ username: "", password: "", password2: "", verification: "", }); const islock = ref(false);//发送验证码按钮禁用时期 const sendVerifyBtn = ref('发送验证码'); //按钮的样式规则 let validateEdit = async (rule, value) => { console.log("validateEdit", value, value === ""); if (formState.username == "" && formState.password == "" && formState.password2 == "" && formState.verification == ""){ btnActive.value = false; sendActive.value = false; }else { btnActive.value = true; sendActive.value = true; } return Promise.resolve(); };
//密码规则 const validatePass = async () => { if (formState.password2 !== '') { formRef.value.validateFields('password2'); } return Promise.resolve(); };
//确认密码规则 const validatePass2 = async (rule, value) => { if (value !== formState.password) { return Promise.reject("请输入相同密码"); } else { return Promise.resolve(); } };
//验证码规则 const validateVerfy = async (rule, value) => { if (verfy !== formState.verification) { return Promise.reject('请输入正确的验证码'); } else { return Promise.resolve(); } }; //表单校检规则 const rules = { username: [ {required: true, message: '输入的邮箱地址不能为空', trigger: 'blur'}, {required: true, message: '输入的邮箱地址不能为空', trigger: 'change'}, {type: 'email', message: '请输入有效的邮箱地址', trigger: 'change'}, {type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur'}, {validator: validateEdit, trigger: 'change' } ], verification: [ {required: true, message: '输入的验证码不能为空', trigger: 'blur'}, {required: true, message: '输入的验证码不能为空', trigger: 'change'}, {validator: validateVerfy, trigger: 'blur'}, {validator: validateEdit, trigger: 'change' } ], password: [ {required: true, message: '输入的密码不能为空', trigger: 'blur'}, {required: true, message: '输入的密码不能为空', trigger: 'change'}, {validator: validatePass, trigger: 'blur'}, {validator: validatePass, trigger: 'change' }, { validator: validateEdit, trigger: 'change' } ], password2: [ {required: true, message: '输入的密码不能为空', trigger: 'blur'}, {required: true, message: '输入的密码不能为空', trigger: 'change'}, {validator: validatePass2, trigger: 'blur'}, {validator: validatePass2, trigger: 'change' }, { validator: validateEdit, trigger: 'change' } ] }; const timeWait = function(callback, limit) { let times = limit; const timeout = function(){ if (times > 0) { setTimeout(()=>{ times--; timeout(); callback(times); },1000); } } return timeout; } let _timewait = null; const checkSendLock = (isSend) => { let _waitSencod = 60; let _saveSecond = storage.get('tools_reg_sendwait'); if (_saveSecond) { _waitSencod = _saveSecond; } if (! _timewait && (isSend || !isSend && _waitSencod != 60)) { islock.value = true; _timewait = timeWait(times => { // console.log('sendVerify timeWait',times); sendActive.value = false; sendVerifyBtn.value = '重新发送('+ times + 's)'; storage.set('tools_reg_sendwait', times); if (times == 0) { islock.value = false; if (isSend) { sendActive.value = false; sendVerifyBtn.value = '重新发送'; } else { sendActive.value = true; sendVerifyBtn.value = '发送验证码'; } storage.remove('tools_reg_sendwait'); _timewait = null; } },_waitSencod); _timewait(); } } //生成随机数 const random = (max,min) => { return Math.round(Math.random()*(max-min)+min); }
//生成随机四位验证码 const randomStr = () => { let strData = ""; //生成随机字符库 (验证码四位，随机数三种，取公倍数12,所以循环4次。也可以是120次，1200次。) for(let i=0;i<4;i++){ let num = random(0,9); let az = String.fromCharCode(random(97,122)); let AZ = String.fromCharCode(random(65,90)); strData = strData + num + az + AZ;//将生成的字符进行字符串拼接 } // 开始真正的随机(从随机字符库中随机取出四个) let str = ""; for(let i=0;i<4;i++){ str += strData[random(0,strData.length-1)] } verfy = str; // console.log('正确验证码：',str) return str; } //发送验证码 const sendVerifyCode = () => { randomStr(); // console.log('verfy:',verfy); formRef.value.validateFields('username') //触发表单只对某一具体值进行验证 .then(() => { axios.post(config.weburl + '/user/post_email', qs.stringify({ email: formState.username, sale: verfy, })).then(function (response) { console.log('response', response); if (response.data.status == 0) { verifyCode = response.data.sale; checkSendLock(true); message.info('发送验证码成功'); }else if(response.data.status == 1) { message.error(response.data.msg); } else { message.info('发送验证码失败'); } }); }) .catch(err=>{ console.log(err); }); } // window.localStorage.removeItem('tools_reg_sendwait');
const onRegister = () => { formRef.value .validate() .then(() => { axios.post(config.weburl + '/user/register', qs.stringify({ email:formState.username, password: formState.password })).then(function (response) { console.log('onRegister:',response); if(response.data.status == 0){ message.info('注册成功'); storage.remove('tools_reg_sendwait'); router.push({ path: '/login' }); }else{ message.error('注册失败：' + response.data.msg); } }).catch(error => { console.log('里面的error', error); }); }) .catch((error) => { console.log('外面的error', error); }); } } });
