Question

我正在尝试创建一个具有两个字段的配置文件表单 password和rePassword。基本上，它们应该是相同的。

我尝试使用网络上找到的不同代码和不同方法。他们中有些人工作了，但是。它实际上与代码不匹配。

这是一段代码：

Profile.vue：

<v-layout>
        <v-flex xs12 sm6>
          <v-text-field                        
            v-model="password"
            :append-icon="show ? 'visibility' : 'visibility_off'"
            :rules="[rules.required, rules.min]"
            :type="show ? 'text' : 'password'"
            name="password"
            label="Enter Password"
            hint="At least 8 characters"
            counter
            @click:append="show = !show"
          ></v-text-field>
        </v-flex>

          <v-flex xs12 sm6>
            <v-text-field            
              v-model="rePassword"
              :append-icon="show1 ? 'visibility' : 'visibility_off'"
              :rules="[rules.required, rules.min]"
              :type="show1 ? 'text' : 'password'"
              name="input-10-1"
              label="Re-enter Password"
              hint="At least 8 characters"
              counter
              @click:append="show1 = !show1"
            ></v-text-field>
          </v-flex>
          </v-layout>

这是脚本的样子：

Profile.vue（脚本）：

data() {
      return {
        show: false,
        show1: false,
        password: 'Password',
        rePassword: 'Password',
        rules: {
          required: value => !!value || 'Required.',
          min: v => v.length >= 8 || 'Min 8 characters',
          emailMatch: () => ('The email and password you entered don\'t match')
        },
        emailRules: [
          v => !!v || 'E-mail is required',
          v => /.+@.+/.test(v) || 'E-mail must be valid'
        ],
        date: new Date().toISOString().substr(0, 10),
        menu: false,
        items: ['male', 'female'],
        address: '',
        title: "Image Upload",
        dialog: false,
        imageName: '',
        imageUrl: '',
        imageFile: ''
      }
    },
    methods: {
      pickFile() {
        this.$refs.image.click()
      },            
          onFilePicked(e) {
        const files = e.target.files
        if(files[0] !== undefined) {
          this.imageName = files[0].name
          if(this.imageName.lastIndexOf('.') <= 0) {
            return
          }
          const fr = new FileReader ()
          fr.readAsDataURL(files[0])
          fr.addEventListener('load', () => {
            this.imageUrl = fr.result
            this.imageFile = files[0] // this is an image file that can be sent to server...
          })
        } else {
          this.imageName = ''
          this.imageFile = ''
          this.imageUrl = ''
        }
        },
    }
      ,
      validate() {
        if (this.$refs.form.validate()) {
          this.snackbar = true
        }
      },
      reset() {
        this.$refs.form.reset()
      }

如何使用vuetify在验证中添加密码匹配功能。谢谢

Answer 1

最简单的方法是使用v模型（密码和Confirm_Password），无需使用计算

规则

:rules="[v => !!v || 'field is required']"

或

:rules="[password!="" || 'field is required']"

输入密码

<v-text-field label="Password*" v-model="password" type="password" required   :rules="[v => !!v || 'field is required']"></v-text-field>

确认密码字段规则

 :rules="[(password === confirm_password) || 'Password must match']"

代码：

 <v-text-field label="Confirm Password*" v-model="confirm_password" type="password"  required   :rules="[(password === confirm_password) || 'Password must match']"></v-text-field>

Answer 2

VeeValidate非常适合表单验证，但我认为，仅在Vuetify即可解决此问题时，解决该问题就显得过分了。

在@ittus答案之后，您需要删除passwordConfirmationRule中的箭头功能才能访问 this ：

      return this.password === this.rePassword || "Password must match";

请参见this codesandbox working example（现在也使用Vuetify 2.x）

Answer 3

您可以定义自定义规则：

computed: {
    passwordConfirmationRule() {
      return () => (this.password === this.rePassword) || 'Password must match'
    },
}

并使用它

 <v-flex xs12 sm6>
    <v-text-field            
      v-model="rePassword"
      :append-icon="show1 ? 'visibility' : 'visibility_off'"
      :rules="[rules.required, rules.min, passwordConfirmationRule]"
      :type="show1 ? 'text' : 'password'"
      name="input-10-1"
      label="Re-enter Password"
      hint="At least 8 characters"
      counter
      @click:append="show1 = !show1"
    ></v-text-field>
  </v-flex>

Answer 4

非常简单地使用Vee-validate：

<div id="app">
  <v-app id="inspire">
    <form>
      <v-text-field
        ref="password"
        type="password"
        v-model="pass"
        v-validate="'required'"
        :error-messages="errors.collect('pass')"
        label="Pass"
        data-vv-name="pass"
        required
      ></v-text-field>
      <v-text-field
        v-model="pass2"
        type="password"
        v-validate="'required|confirmed:password'"
        :error-messages="errors.collect('pass2')"
        label="Pass 2"
        data-vv-name="pass"
        required
      ></v-text-field>

      <v-btn @click="submit">submit</v-btn>
      <v-btn @click="clear">clear</v-btn>
    </form>
  </v-app>
</div>

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  $_veeValidate: {
    validator: 'new'
  },

  data: () => ({
    pass: '',
    pass2: "",
  }),
  methods: {
    submit () {
      this.$validator.validateAll()
        .then(result => {
          console.log(result)
        })
    },
    clear () {
      this.pass = ''
      this.pass2 = ''
    }
  }
})

请记住先安装vee-validate，然后重新启动本地服务器。

link to codepen

link to docs

Answer 5

这很适合我！

// template
<v-text-field v-model="password" label="password"></v-text-field>
<v-text-field v-model="confirmPassword" :rules="confirmPasswordRules" label="confirmPassword"></v-text-field>
      
// script
computed: {
  confirmPasswordRules() {
    const rules = [(this.password === this.confirmPassword) || "Password must match."];
    return rules;
   },
 }

Answer 6

这绝对不是一个干净的解决方案，但效果很好。

    <v-text-field
        type="password"
        v-model="password"
        :rules="passwordRules"
        required
    ></v-text-field>
    <v-text-field
        type="password"
        v-model="passwordConfirm"
        :rules="passwordConfirmRules"
        required
    ></v-text-field>

let globalPassword = "";

    watch: {
        password() {
            globalPassword = this.password;
        },
    },

    passwordConfirmRules = [
        (v) => v === globalPassword || "Password must match",
    ];

如何在vuetify中添加密码匹配验证？

6 个答案: