javascript - 如何使用 vue/quasar 验证确认密码

Question

我编写了一段代码来连接到 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

我尝试 Dean 的建议

 <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，我会发消息但如果我输入两个不同的密码什么也没有..我设置了断点，所有值都很好。在我的情况下，这肯定是一个语法问题..当我输入时

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

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

Answer 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 :-)']
            }
        },

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