如何使用 vue/quasar 验证确认密码答案

【问题标题】：How validate confirm password with vue/quasar如何使用 vue/quasar 验证确认密码
【发布时间】：2020-01-31 14:24:19
【问题描述】：

我在 vue/quasar/C# 中编写了一个连接到应用程序的代码我只是从 vue 开始。而且我不明白规则是如何运行的。我写这个是为了检查密码/ConfimPassword 的输入是否为空

<q-form v-bind:submit="createUser"
            v-bind:reset="resetCreateUser"
            class="q-gutter-md"
            v-if="status==2"
            ref="frmCreateUser"
            autofocus>
         <q-input filled
                 v-model="loginData.password"
                 label="Votre mot de passe"
                 hint="Saisissez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="[ val => val && val.length > 0 || 'Saisissez votre mot de passe']"
                 ref="fldPasswordCreateUser"
                 data-vv-name="fldPasswordCreateUser">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
            </template>
        </q-input>
        <q-input filled
                 v-model="loginData.passwordConfirm"
                 label="Confirmez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="[ val => val && val.length > 0 || 'Saisissez votre mot de passe']">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
            </template>
        </q-input>
       ...
    </q-form>

我检查我的方法if (this.loginData.password == this.loginData.passwordConfirm) {... 但我想修改我的 v-bind:rules 并显示错误，如空字段并输入“密码不匹配” 但我总是有错误的 sysntaxs ...... 感谢您的帮助

更新

我试试

v-bind:rules="[val => val && val.length > 0 || 'saisissez quelque chose :)',val => val != $refs.fldPasswordChange || 'Mots de passe différents']"

拥有 2 个控件，但似乎第二个没有触发

更新2

我试试院长的建议

 <q-input filled
                 v-model="loginData.password"
                 label="Votre mot de passe"
                 hint="Saisissez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="Required"
                 ref="fldPasswordChange">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
            </template>
        </q-input>
        <q-input filled
                 v-model="loginData.passwordConfirm"
                 label="Confirmez votre mot de passe"
                 v-bind:type="isPwd ? 'password' : ''"
                 lazy-rules
                 v-bind:rules="ConfirmPWD"
                 ref="fldPasswordChangeConfirm">
            <template v-slot:append>
                <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                        class="cursor-pointer"
                        v-on:click="isPwd = !isPwd"></q-icon>
            </template>
        </q-input>

和

 computed: {
            ConfirmPWD() {
                return [
                    (v) => !!v || "Saisissez quelquechose :-)",
                    (v) => v != this.$refs.fldPasswordChange.value || "Mots de passe différents"
                 ]
            },
            Required() {
                return [(v) => !!v || 'Saisissez quelque chose :-)']
            }
        },

但似乎第二个控件没有触发。如果我不填写 confimPassword，我有消息但如果我输入 2 个不同的密码什么都没有.. 我放了断点，所有的价值都很好。在我的情况下肯定是语法问题..当我放

(v) => v != this.$refs.fldPasswordChange.value || "Mots de passe différents"

没有 (v) => !!v || “Saisissez quelquechose :-)”，没有消息错误

【问题讨论】：

我建议您查看 vue 框架中的“计算”属性或“过滤器”。任何类型的复杂逻辑都可以在一个单独的计算函数中更容易地清理和管理，如果它符合您的标准，则该函数可以返回 true 或 false。当您的密码不匹配时，这将允许条件标签甚至禁用按钮。 vuejs.org/v2/guide/computed.html

标签： javascript vue.js quasar-framework

【解决方案1】：

<q-input filled
             v-model="loginData.password"
             label="Votre mot de passe"
             hint="Saisissez votre mot de passe"
             v-bind:type="isPwd ? 'password' : ''"
             lazy-rules
             v-bind:rules="Required"
             ref="fldPasswordChange">
        <template v-slot:append>
            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    v-on:click="isPwd = !isPwd"></q-icon>
        </template>
    </q-input>
    <q-input filled
             v-model="loginData.passwordConfirm"
             label="Confirmez votre mot de passe"
             v-bind:type="isPwd ? 'password' : ''"
             lazy-rules
             v-bind:rules="ConfirmPWD"
             ref="fldPasswordChangeConfirm">
        <template v-slot:append>
            <q-icon :name="isPwd ? 'visibility_off' : 'visibility'"
                    class="cursor-pointer"
                    v-on:click="isPwd = !isPwd"></q-icon>
        </template>
    </q-input>

和

computed: {
            ConfirmPWD() {
                return [
                    (v) => !!v || "Saisissez quelque chose :-)",
                    (v) => v == this.$refs.fldPasswordChange.value || "Mots de passe différents"
                 ]
            },
            Required() {
                return [(v) => !!v || 'Saisissez quelque chose :-)']
            }
        },

这只是对第一部分的误解......我需要用好的表达而不是条件来放置错误信息。

【讨论】：

【解决方案2】：

你可以像这样在规则语句中简单地检查这个条件

:rules="[val => val==loginData.password || '密码不匹配']"

【讨论】：