如何使用 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

我試試院長的建議

 <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 :-)”，沒有消息錯誤

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

這只是對第一部分的誤解......我需要用良好的表達而不是條件來放置錯誤信息。