vant验证两次输入的密码是否一致的方法示例

在 Vant 中可以使用 `van-field` 组件来实现验证两次输入的密码是否一致。具体方法如下：

1. 在模板中使用 `van-field` 组件来创建两个输入框，一个用于输入密码，另一个用于再次确认密码。

<van-field
  v-model="password"
  label="密码"
  type="password"
></van-field>
<van-field
  v-model="confirmPassword"
  label="确认密码"
  type="password"
></van-field>

2. 在 `data` 中定义 `password` 和 `confirmPassword` 变量，用于双向绑定输入框的值。

data() {
  return {
    password: '',
    confirmPassword: ''
  }
}

3. 在 `van-field` 中添加 `:rules` 属性，用于设置验证规则。其中 `validator` 方法用于自定义验证规则，判断两次输入的密码是否一致。

<van-field
  v-model="password"
  label="密码"
  type="password"
></van-field>
<van-field
  v-model="confirmPassword"
  label="确认密码"
  type="password"
  :rules="[
    { message: '请再次输入密码', trigger: 'blur' },
    { validator: checkPassword, trigger: 'blur' }
  ]"
></van-field>

4. 在 `methods` 中定义 `checkPassword` 方法，用于验证两次输入的密码是否一致。

methods: {
  checkPassword(rule, value, callback) {
    if (value === '') {
      callback(new Error('请再次输入密码'))
    } else if (value !== this.password) {
      callback(new Error('两次输入的密码不一致'))
    } else {
      callback()
    }
  }
}

以上就是使用 Vant 验证两次输入的密码是否一致的方法示例。通过设置 `:rules` 属性，并在其中定义 `validator` 方法，可以方便地实现各种验证规则。