如何在 vuetify 中添加密码匹配验证? [英] How to add password matching validation in vuetify?

问题描述

我正在尝试创建一个包含两个字段的个人资料表单password 和 rePassword.基本上，两者应该是一样的.

我尝试使用在网络上找到的不同代码和不同方法.他们中的一些人工作，但是.它实际上并不适合代码.

代码如下:

Profile.vue:

<v-flex xs12 sm6><v-文本字段v-model=密码":append-icon="显示 ?'可见性':'visibility_off''':rules="[rules.required, rules.min]";:type="显示 ?‘文本’:‘密码’"名称=密码"label="输入密码";提示=至少 8 个字符"；柜台@click:append="show = !show";></v-text-field></v-flex><v-flex xs12 sm6><v-文本字段v-model=rePassword":append-icon="show1 ?'可见性':'visibility_off''':rules="[rules.required, rules.min]";:type="show1 ?‘文本’:‘密码’"名称=输入-10-1"；label="重新输入密码";提示=至少 8 个字符"；柜台@click:append="show1 = !show1";></v-text-field></v-flex></v-layout>

脚本如下:

Profile.vue(脚本):

data() {返回 {显示:假，显示1:假，密码:'密码'，rePassword: '密码',规则:{要求:值=>!!值 ||'必需的.'，分钟:v =>v.length >= 8 ||'最少 8 个字符',emailMatch: () =>('您输入的电子邮件和密码不匹配')},电子邮件规则:[v =>!! v ||'需要电子邮件',v =>/.+@.+/.test(v) ||'电子邮件必须有效'],日期:新日期().toISOString().substr(0, 10),菜单:假，项目:['男性'，'女性']，地址: ''，title: "图片上传",对话:假，图像名称:'',图片网址:'',图像文件: ''}},方法: {选择文件(){this.$refs.image.click()},onFilePicked(e) {const 文件 = e.target.files如果(文件 [0] ！== 未定义){this.imageName = files[0].nameif(this.imageName.lastIndexOf('.') <= 0) {返回}const fr = 新文件阅读器 ()fr.readAsDataURL(文件[0])fr.addEventListener('load', () => {this.imageUrl = fr.resultthis.imageFile = files[0]//这是一个可以发送到服务器的图像文件...})} 别的 {this.imageName = ''this.imageFile = ''this.imageUrl = ''}},},证实() {如果 (this.$refs.form.validate()) {this.snackbar = true}},重启() {this.$refs.form.reset()}

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

解决方案

使用 Vee-validate 非常简单:

<v-app id="inspire"><表格><v-文本字段参考=密码"类型=密码"v-model="通过"v-validate="'必需'":error-messages="errors.collect('pass')"标签=通过"数据-vv-name="pass"必需的></v-text-field><v-文本字段v-model="pass2"类型=密码"v-validate="'required|confirmed:password'":error-messages="errors.collect('pass2')"标签="通过 2"数据-vv-name="pass"必需的></v-text-field><v-btn @click="submit">submit</v-btn><v-btn @click="clear">clear</v-btn></表单></v-app>

Vue.use(VeeValidate)新的 Vue({el: '#app',$_vee验证:{验证器:'新'},数据:() =>({经过: ''，pass2: "",}),方法: {提交 () {this.$validator.validateAll().then(结果 => {控制台日志(结果)})},清除 () {this.pass = ''this.pass2 = ''}}})

记得先安装 vee-validate 并重启你的本地服务器.

codepen 链接

文档链接

I am trying to create a profile form which have two fields password and rePassword. basically, Both of them should be the same.

I tried using different codes found on the web and different approaches. Some of them worked but. It did'nt actually fit in with the code.

Here is the piece of code:

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>

This is how the script looks like:

Profile.vue (script):

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()
      }

How do I add a password matching feature in the validation using vuetify. Thanks

解决方案

Very simply using 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 = ''
    }
  }
})

Remember to install vee-validate first and restart your local-server.

link to codepen

link to docs

这篇关于如何在 vuetify 中添加密码匹配验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！