Antd的自定义校验（修改注册密码，两次密码确认）

最新推荐文章于 2024-06-14 11:16:32 发布

Ciwei蓝

最新推荐文章于 2024-06-14 11:16:32 发布

阅读量1.6k

点赞数

分类专栏： 2022Vue学习笔记文章标签：前端 vue.js antd

本文链接：https://blog.csdn.net/Blue54/article/details/125849039

版权

2022Vue学习笔记专栏收录该内容

54 篇文章 1 订阅

订阅专栏

该博客展示了如何使用Ant Design Vue库创建一个修改密码的模态对话框，包括旧密码、新密码和确认新密码字段。内容详细描述了表单模型的构建，以及对应的验证规则，如新旧密码的必填性和一致性验证。此外，还提供了数据中的验证函数示例，用于确保密码输入的正确性。

摘要由CSDN通过智能技术生成

templeate：

 <a-modal
      width="30%"
      title="修改密码"
      wrapClassName="wrapClassName"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      :footer="null"
      @cancel="handleCancel"
    >
      <a-form-model
        v-if="visible"
        :model="form"
        ref="form"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-model-item prop="oldpassword" :labelCol="{ span: 6 }" :wrapperCol="{ span: 14 }" label="旧密码">
          <a-input v-model="form.oldpassword" type="password" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item
          has-feedback
          prop="newpassword"
          :validateStatus="validateStatus"
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 14 }"
          label="新密码"
        >
          <a-input v-model="form.newpassword" />
        </a-form-model-item>
        <a-form-model-item
          has-feedback
          prop="renewpassword"
          :validateStatus="validateStatus"
          :labelCol="{ span: 6 }"
          :wrapperCol="{ span: 14 }"
          label="再次确认新密码"
        >
          <a-input v-model="form.renewpassword" />
        </a-form-model-item>
      </a-form-model>
      <div class="surebtn">
        <div>
          <a-button class="suerbtn-l" @click="handleCancel">取消</a-button>
          <a-button @click="sure">确认</a-button>
        </div>
      </div>
    </a-modal>

data中：return上面data内：

 const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.newpassword !== '') {
          this.$refs.form.validateField('renewpassword')
        }
        callback()
      }
    }
    const validatepasssure = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.form.newpassword) {
        callback(new Error('两次输入新密码不一致!'))
      } else {
        callback()
      }
    }

data中配置：

 rules: {
        oldpassword: [{ required: true, message: '请输入旧密码', trigger: 'change' }],
        newpassword: [{ required: true, validator: validatePass, trigger: 'change' }],
        renewpassword: [{ required: true, trigger: 'change', validator: validatepasssure }],
      },