vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例
好記性不如爛筆頭。總也記不住
<el-form :model='ruleForm' :rules='rules' ref='ruleForm' label- class='demo-ruleForm'> <el-form-item label='新密碼' prop='newPwd'><el-input v-model='ruleForm.newPwd' clearable size='small' type='password'></el-input> </el-form-item> <el-form-item label='確認(rèn)密碼' prop='confirmPwd'><el-input v-model='ruleForm.confirmPwd' clearable size='small' type='password'></el-input> </el-form-item> <el-form-item><el-button type='primary' @click='submitForm(’ruleForm’)' class='button'>確定</el-button><el-button @click='resetForm(’ruleForm’)' class='button'>重置</el-button> </el-form-item></el-form>
驗(yàn)證兩次密碼是否一致 卻保證輸入的密碼在6-16個(gè)字符之間
關(guān)鍵代碼如下:
data() { var validatePass = (rule, value, callback) => { if (value === ’’) {callback(new Error(’請(qǐng)輸入密碼’)); } else { if (this.ruleForm.confirmPwd !== ’’) { this.$refs.ruleForm.validateField(’confirmPwd’); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === ’’) { callback(new Error(’請(qǐng)?jiān)俅屋斎朊艽a’)); } else if (value !== this.ruleForm.newPwd) { callback(new Error(’兩次輸入密碼不一致!’)); } else { callback(); } }; return { changePwdDialog:false,//修改密碼彈框 ruleForm: { newPwd: ’’, confirmPwd:’’ }, rules: { newPwd: [ { required: true, message: ’請(qǐng)輸入密碼’, trigger: ’blur’ }, { min: 6, max: 16, message: ’長(zhǎng)度在 6 到 16 個(gè)字符’, trigger: ’blur’ }, { validator: validatePass, trigger: ’blur’ } ], confirmPwd:[ { required: true, message: ’請(qǐng)確認(rèn)密碼’, trigger: ’blur’ }, { min: 6, max: 16, message: ’長(zhǎng)度在 6 到 16 個(gè)字符’, trigger: ’blur’ }, { validator: validatePass2, trigger: ’blur’, required: true } ], } } },
到此這篇關(guān)于vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例的文章就介紹到這了,更多相關(guān)vue 輸入密碼驗(yàn)證內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問(wèn)題……2. IDEA版最新MyBatis程序配置教程詳解3. 教你如何寫(xiě)出可維護(hù)的JS代碼4. docker /var/lib/docker/aufs/mnt 目錄清理方法5. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)6. 使用Python和百度語(yǔ)音識(shí)別生成視頻字幕的實(shí)現(xiàn)7. Gitlab CI-CD自動(dòng)化部署SpringBoot項(xiàng)目的方法步驟8. Django:使用filter的pk進(jìn)行多值查詢操作9. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式10. css代碼優(yōu)化的12個(gè)技巧
