Antd——表單使用自定義正則進行校驗
阿新 • • 發佈:2021-06-30
前言
Ant Design of Vue
中的表單如何使用自定義正則進行校驗
內容
<template> <!--省略程式碼--> <div @click="changePassword"> <a-icon style="margin-right: 8px" type="edit" /> <span>修改密碼</span> </div> <!--省略程式碼--> <a-modal title="修改密碼" :visible="createDialogVisible" @ok="modelConfirm" @cancel="modalCancel" > <a-form-model ref="passwordFrom" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-model-item ref="password" label="舊密碼" prop="password" > <a-input-password v-model="form.password" placeholder="舊密碼" /> </a-form-model-item> <a-form-model-item ref="newPassword" label="新密碼" prop="newPassword" > <a-input-password v-model="form.newPassword" placeholder="新密碼" /> </a-form-model-item> <a-form-model-item ref="reNewPassword" label="確認密碼" prop="reNewPassword" > <a-input-password v-model="form.reNewPassword" placeholder="請再次輸入新密碼" /> </a-form-model-item> </a-form-model> </a-modal> </a-layout-header> </template> <script> export default { data() { return { labelCol: { span: 4 }, wrapperCol: { span: 14 }, form: { password: "", newPassword: "", reNewPassword: "", _id: "", }, rules: { password: [ { required: true, message: "請輸入舊密碼", trigger: "blur" }, ], newPassword: [ { required: true, message: "請輸入新密碼", trigger: "change" }, // 表單自定義校驗 { validator: this.checkPassword } ], reNewPassword: [ { required: true, message: "請再次輸入新密碼", trigger: "change" }, { validator: this.checkPassword } ] }, createDialogVisible: false, searchActive: false, }; }, methods: { // 校驗密碼複雜度 checkPassword(rule, value, callback) { if (value && !/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/.test(value)) { callback(new Error('密碼為數字,小寫字母,大寫字母,特殊符號 至少包含三種,長度為 8 - 16位')) } // 回撥一定不要忘記了 callback() }, // 修改密碼 changePassword() { this.createDialogVisible = true; }, // model 確認按鈕 modelConfirm() { this.$refs.passwordFrom.validate((valid) => { if (valid) { // 只做前端進行判斷兩次密碼輸入是否一致 | 後端不進行判斷 [我也不清楚咋想的] if (this.form.newPassword !== this.form.reNewPassword) { this.$message.error('您兩次輸入的新密碼不一致,請檢查後重新輸入'); return } this.form._id = JSON.parse(localStorage.getItem('userInfo')).user._id let payload = { data: { ...this.form, }, }; this.$mqtt.doPublish( { pubTopic: "<topic>", payload, }, (topic, data) => { if (data.code == 200) { this.$message.success("密碼更新成功"); this.logout() } if (data.code == 1002 ) { this.$message.error("您輸入的舊密碼錯誤"); this.modalCancel() } if (data.code == 1022 ) { this.$message.error("您輸入的密碼複雜度不滿足"); this.modalCancel() } if (data.code == 1000 ) { this.$message.error("臥槽,您的賬號竟然不存在~"); this.createDialogVisible = false; } }, this ); } else { console.log("error submit!!"); return false; } }); }, // model 取消按鈕 modalCancel() { this.$refs.passwordFrom.resetFields(); this.createDialogVisible = false; }, // 退出登入 logout() { logout(); this.$router.push("/login"); } }, }; </script>