fix(收款设置): 添加银行账号校验并移除number类型限制
添加银行账号输入校验逻辑,包括非空检查和数字格式验证 移除银行账号输入框的number类型限制以允许非数字字符的校验 在表单提交和模态框操作时重置错误状态
Showing
1 changed file
with
42 additions
and
2 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-08-08 12:35:58 | 4 | + * @LastEditTime: 2025-08-08 13:24:11 |
| 5 | * @FilePath: /jgdl/src/pages/collectionSettings/index.vue | 5 | * @FilePath: /jgdl/src/pages/collectionSettings/index.vue |
| 6 | * @Description: 收款设置 | 6 | * @Description: 收款设置 |
| 7 | --> | 7 | --> |
| ... | @@ -72,9 +72,10 @@ | ... | @@ -72,9 +72,10 @@ |
| 72 | v-model="tempAccountInfo.bankAccount" | 72 | v-model="tempAccountInfo.bankAccount" |
| 73 | placeholder="请输入银行账号" | 73 | placeholder="请输入银行账号" |
| 74 | class="form-input custom-input native-input" | 74 | class="form-input custom-input native-input" |
| 75 | - type="number" | ||
| 76 | :cursor-spacing="50" | 75 | :cursor-spacing="50" |
| 76 | + @blur="validateBankAccount" | ||
| 77 | /> | 77 | /> |
| 78 | + <text v-if="bankAccountError" class="error-text">{{ bankAccountError }}</text> | ||
| 78 | </view> | 79 | </view> |
| 79 | 80 | ||
| 80 | <!-- 银行卡正面照片上传 --> | 81 | <!-- 银行卡正面照片上传 --> |
| ... | @@ -422,6 +423,11 @@ const showEndDateTypeModal = ref(false); | ... | @@ -422,6 +423,11 @@ const showEndDateTypeModal = ref(false); |
| 422 | const idCardError = ref(''); | 423 | const idCardError = ref(''); |
| 423 | 424 | ||
| 424 | /** | 425 | /** |
| 426 | + * 银行账号错误信息 | ||
| 427 | + */ | ||
| 428 | +const bankAccountError = ref(''); | ||
| 429 | + | ||
| 430 | +/** | ||
| 425 | * 日期选择器相关状态 | 431 | * 日期选择器相关状态 |
| 426 | */ | 432 | */ |
| 427 | const idcardBeginDate = ref(new Date()); | 433 | const idcardBeginDate = ref(new Date()); |
| ... | @@ -575,6 +581,38 @@ const handleIdCardBlur = () => { | ... | @@ -575,6 +581,38 @@ const handleIdCardBlur = () => { |
| 575 | }; | 581 | }; |
| 576 | 582 | ||
| 577 | /** | 583 | /** |
| 584 | + * 银行账号校验 | ||
| 585 | + * @param {string} bankAccount - 银行账号 | ||
| 586 | + * @returns {object} - 校验结果 | ||
| 587 | + */ | ||
| 588 | +const validateBankAccountNumber = (bankAccount) => { | ||
| 589 | + if (!bankAccount) { | ||
| 590 | + return { valid: false, error: '请输入银行账号' }; | ||
| 591 | + } | ||
| 592 | + | ||
| 593 | + // 检查是否都是数字 | ||
| 594 | + const numberRegex = /^\d+$/; | ||
| 595 | + if (!numberRegex.test(bankAccount)) { | ||
| 596 | + return { valid: false, error: '银行账号只能包含数字' }; | ||
| 597 | + } | ||
| 598 | + | ||
| 599 | + return { valid: true, error: '' }; | ||
| 600 | +}; | ||
| 601 | + | ||
| 602 | +/** | ||
| 603 | + * 处理银行账号失焦事件 | ||
| 604 | + */ | ||
| 605 | + const validateBankAccount = () => { | ||
| 606 | + const bankAccount = tempAccountInfo.value.bankAccount; | ||
| 607 | + if (bankAccount) { | ||
| 608 | + const result = validateBankAccountNumber(String(bankAccount)); | ||
| 609 | + bankAccountError.value = result.error; | ||
| 610 | + } else { | ||
| 611 | + bankAccountError.value = ''; | ||
| 612 | + } | ||
| 613 | + }; | ||
| 614 | + | ||
| 615 | +/** | ||
| 578 | * 根据银行ID获取银行名称 | 616 | * 根据银行ID获取银行名称 |
| 579 | * @param {string} bankId - 银行ID | 617 | * @param {string} bankId - 银行ID |
| 580 | * @returns {string} - 银行名称 | 618 | * @returns {string} - 银行名称 |
| ... | @@ -613,6 +651,7 @@ const onBankConfirm = ({ selectedValue }) => { | ... | @@ -613,6 +651,7 @@ const onBankConfirm = ({ selectedValue }) => { |
| 613 | */ | 651 | */ |
| 614 | const openAccountModal = () => { | 652 | const openAccountModal = () => { |
| 615 | tempAccountInfo.value = { ...accountInfo.value }; | 653 | tempAccountInfo.value = { ...accountInfo.value }; |
| 654 | + bankAccountError.value = ''; | ||
| 616 | showAccountModal.value = true; | 655 | showAccountModal.value = true; |
| 617 | }; | 656 | }; |
| 618 | 657 | ||
| ... | @@ -622,6 +661,7 @@ const openAccountModal = () => { | ... | @@ -622,6 +661,7 @@ const openAccountModal = () => { |
| 622 | const closeAccountModal = () => { | 661 | const closeAccountModal = () => { |
| 623 | showAccountModal.value = false; | 662 | showAccountModal.value = false; |
| 624 | tempAccountInfo.value = { bankName: '', bankAccount: '', bankImg: '' }; | 663 | tempAccountInfo.value = { bankName: '', bankAccount: '', bankImg: '' }; |
| 664 | + bankAccountError.value = ''; | ||
| 625 | }; | 665 | }; |
| 626 | 666 | ||
| 627 | /** | 667 | /** | ... | ... |
-
Please register or login to post a comment