本文實(shí)例為大家分享了vue+Element-ui實(shí)現(xiàn)登錄注冊(cè)表單的具體代碼，供大家參考，具體內(nèi)容如下

登錄注冊(cè)表單驗(yàn)證

通過(guò)Element-ui的表單實(shí)現(xiàn)登錄注冊(cè)的表單驗(yàn)證

效果圖如下

注冊(cè)

登錄表單

登錄的實(shí)現(xiàn)，需要通過(guò)手機(jī)號(hào)或者郵箱進(jìn)行登錄,驗(yàn)證手機(jī)號(hào)或者郵箱符合要求

// 登錄表單驗(yàn)證的代碼// template的代碼<el-form :model='ruleForm' :rules='rules' ref='ruleForm' label-> <el-form-item prop='user'> <el-input type='text' placeholder='請(qǐng)輸入手機(jī)號(hào)或者郵箱號(hào)' required='required' v-model='ruleForm.user' prefix-icon='el-icon-user-solid' ></el-input> </el-form-item> <el-form-item prop='pass'> <el-input type='password' placeholder='請(qǐng)輸入密碼' prefix-icon='el-icon-lock' v-model='ruleForm.pass' @keyup.enter.native='toSubmitForm(’ruleForm’)' ></el-input> </el-form-item> <el-form-item> <el-button type='primary' @click='submitForm(’ruleForm’)'>登錄</el-button> </el-form-item> </el-form>//script的代碼// 兩個(gè)驗(yàn)證，驗(yàn)證密碼不能為空，驗(yàn)證，手機(jī)號(hào)或者郵箱是否符合要求data() { var validatePass = (rule, value, callback) => { if (value === ’’) { callback(new Error(’請(qǐng)輸入密碼’)) } else { callback() } } var validateUser = (rule, value, callback) => { if (value === ’’) { callback(new Error(’手機(jī)號(hào)或者郵箱不能為空’)) } else { const reg = /^1[3|4|5|7|8][0-9]d{8}$/ // eslint-disable-next-line no-useless-escape const reg2 = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ if ((reg.test(value) || reg2.test(value))) { callback() } else { callback(new Error(’請(qǐng)輸入正確的手機(jī)號(hào)或者郵箱’)) } } } return { // 獲取url地址后面的參數(shù) urlQuery: ’’, activeIndex: ’1’, ruleForm: { pass: ’’, user: ’’ }, rules: { user: [{ required: true, validator: validateUser, trigger: ’blur’ }], pass: [{ required: true, validator: validatePass, trigger: ’blur’ }] } } },

注冊(cè)表單驗(yàn)證

注冊(cè)表單的實(shí)現(xiàn)，注冊(cè)有用戶名，以及通過(guò)手機(jī)或者郵箱獲取驗(yàn)證碼，之后輸入密碼，且需要再次確認(rèn)密碼是否一致

//注冊(cè)表單的代碼<el-form :model='ruleForm' :rules='rules' ref='ruleForm' class='demo-ruleForm'> <el-form-item prop='user1'> <el-input type='text' placeholder='用戶名' required='required' v-model='ruleForm.user1' prefix-icon='el-icon-user-solid'></el-input> </el-form-item> <el-form-item prop='pass1'> <el-input placeholder='手機(jī)號(hào)/郵箱' v-model='ruleForm.pass1' prefix-icon='el-icon-mobile-phone'></el-input> </el-form-item> <el-form-item prop='code' v-show='yzmshow'> <el-input v-model='ruleForm.code' placeholder='驗(yàn)證碼' :minlength='6' :maxlength='6'></el-input> <el-button type='primary' @click='getCode()' :disabled='!show'> <span v-show='show'>發(fā)送驗(yàn)證碼</span> <span v-show='!show' class='count'>{{ count }} s</span> </el-button> </el-form-item> <el-form-item prop='pass'> <el-input type='password' placeholder='請(qǐng)輸入密碼' v-model='ruleForm.pass' prefix-icon='el-icon-lock'></el-input> </el-form-item> <el-form-item prop='checkPass'> <el-input type='password' placeholder='請(qǐng)?jiān)俅屋斎朊艽a' v-model='ruleForm.checkPass' prefix-icon='el-icon-lock'></el-input> </el-form-item> <el-form-item class='btn-form'> <el-button type='primary' @click='submitForm(’ruleForm’)'>注冊(cè)</el-button> <!-- <el-button @click='resetForm(’ruleForm’)'>重置</el-button> --> </el-form-item> </el-form>// script中data()的代碼data() { var validateUser1 = async (rule, value, callback) => { if (value === ’’) { callback(new Error(’請(qǐng)輸入用戶名’)) } else { if (value) { const res = await request.post(’/api/user/checkUsernameExist’, { username: this.ruleForm.user1 }) console.log(res) if (res.data.code === 20000) { callback() } else { return callback(new Error(’該用戶名已經(jīng)被注冊(cè)’)) } } } } var validatePass1 = async (rule, value, callback) => { if (value === ’’) { callback(new Error(’手機(jī)號(hào)或者郵箱不能為空’)) } else { const reg = /^1[3|4|5|7|8][0-9]d{8}$/ // eslint-disable-next-line no-useless-escape const reg2 = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ if ((reg.test(value) || reg2.test(value))) { this.yzmshow = true callback() } else { callback(new Error(’請(qǐng)輸入正確的手機(jī)號(hào)或者郵箱’)) } } } var validatePass = (rule, value, callback) => { if (value === ’’) { callback(new Error(’請(qǐng)輸入密碼’)) } else { if (this.ruleForm.checkPass !== ’’) { this.$refs.ruleForm.validateField(’checkPass’) } callback() } } var validateCode = (rule, value, callback) => { if (value === ’’) { callback(new Error(’請(qǐng)輸入驗(yàn)證碼’)) } else { if (this.ruleForm.code.length === 6) { callback() } else { callback(new Error(’驗(yàn)證碼不正確’)) } } } var validatePass2 = (rule, value, callback) => { if (value === ’’) { callback(new Error(’請(qǐng)?jiān)俅屋斎朊艽a’)) } else if (value !== this.ruleForm.pass) { callback(new Error(’兩次輸入密碼不一致!’)) } else { callback() } } return { activeIndex: ’2’, loginForm: { mobile: ’’, code: ’’, zheCode: ’’ }, show: true, count: ’’, timer: null, yzmshow: false, ruleForm: { user1: ’’, pass1: ’’, pass: ’’, checkPass: ’’, zhecode: ’’, mobile: ’’, phoneCode: ’’, emailCode: ’’, code: ’’ }, rules: { code: [{ required: true, validator: validateCode, trigger: ’blur’ }, { min: 6, max: 6, message: ’長(zhǎng)度為6’, trigger: ’blur’ } ], user1: [{ required: true, validator: validateUser1, trigger: ’blur’ }], pass1: [{ required: true, validator: validatePass1, trigger: ’blur’ }], // 密碼 pass: [{ required: true, validator: validatePass, trigger: ’blur’ }, { min: 6, message: ’長(zhǎng)度在不少于6個(gè)字符’, trigger: ’blur’ } ], // 校驗(yàn)密碼 checkPass: [{ required: true, validator: validatePass2, trigger: ’blur’ }, { min: 6, message: ’長(zhǎng)度在不少于6個(gè)字符’, trigger: ’blur’ } ] } } },

需要驗(yàn)證手機(jī)號(hào)或者郵箱是否符合要求，如果符合的話顯示驗(yàn)證碼

點(diǎn)擊發(fā)送驗(yàn)證碼進(jìn)行60s倒計(jì)時(shí)，在倒計(jì)時(shí)中，不能再發(fā)送驗(yàn)證碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。