vue3自定义确认密码匹配验证规则

// 自定义确认密码匹配验证规则
const matchPassword = (rules:any, value:any, callback:any) => {
	if (value != addData.payPwd) {
		callback(new Error('两次密码输入不一致!'))
	} else {
		callback()
	}
}


const rules = reactive({
  payPwd: [
    { required: true, message: "请输入支付密码", trigger: "blur" },
    {
      pattern: /^\d+$/,
      message: "只能输入6位数字",
      trigger: "blur",
    },
  ],
  repeatedPwd: [
    { required: true, message: "请输入支付密码", trigger: "blur" },
    {
      pattern: /^\d+$/,
      message: "只能输入6位数字",
      trigger: "blur",
    },
    {validator: matchPassword, trigger: 'blur'}
  ],
});

 <el-dialog
      v-model="AddDialog"
      title="新增会员"
      width="700px"
      @close="closeDialog"
    >
      <el-form
        ref="categoryFormRef"
        :model="addData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="支付密码" prop="payPwd">
          <el-input
            v-model="addData.payPwd"
            placeholder="请输入支付密码"
            show-password
            maxLength="6"
          />
        </el-form-item>
        <el-form-item label="确认支付密码" prop="repeatedPwd">
          <el-input
            v-model="addData.repeatedPwd"
            placeholder="请输入支付密码"
            show-password
            maxLength="6"
          />
        </el-form-item>
      </el-form>

      <template #footer> 
        <div class="dialog-footer">
          <el-button type="primary" @click="handleAdd">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,对于这个需求,可以使用 Vue 提供的自定义验证规则来实现。首先,需要定义一个验证函数,来检查输入的密码是否符合要求。可以使用正则表达式来匹配密码是否为8到16位之间的数字或字母,并且不是连续的字母或数字。以下是一个示例代码: ```javascript Vue.component('my-component', { data: function () { return { password: '' } }, methods: { validatePassword: function (rule, value, callback) { var pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/; var pattern2 = /(\d{1,})\1{2,}/; var pattern3 = /([a-zA-Z]{1,})\1{2,}/; if (pattern.test(value) && !pattern2.test(value) && !pattern3.test(value)) { callback(); } else { callback(new Error('密码必须为8到16位之间的数字或字母,并且不能为连续的字母或数字')); } } }, template: ` <el-form ref="form" :model="password" label-width="80px"> <el-form-item label="密码" prop="password"> <el-input v-model="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> `, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('验证成功'); } else { alert('验证失败'); return false; } }); } }, mounted() { this.$refs.form.resetFields(); } }); ``` 在上述代码中,`validatePassword` 方法用于验证密码是否符合要求。其中,`pattern` 变量定义了一个正则表达式,用于匹配密码是否为8到16位之间的数字或字母。`pattern2` 和 `pattern3` 则分别用于匹配连续的数字和字母。如果输入的密码符合要求,则调用 `callback()` 方法;否则,调用 `callback(new Error('密码必须为8到16位之间的数字或字母,并且不能为连续的字母或数字'))` 方法,返回一个错误信息。 在模板中,使用 `el-form` 和 `el-input` 组件来实现输入框和表单。在 `el-form-item` 组件中,通过 `prop` 属性来指定需要验证的字段,以及使用 `rules` 属性来指定验证规则。在这里,将 `rules` 属性设置为 `{ validator: validatePassword, trigger: 'blur' }`,表示需要验证 `password` 字段,并且在失去焦点时触发验证。在点击提交按钮时,调用 `this.$refs[formName].validate` 方法来进行表单验证,如果验证通过,则弹出 "验证成功" 的提示框;否则,弹出 "验证失败" 的提示框。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值