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个控件，但似乎不能触发

UPDATE2

我尝试了院长的建议

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

这只是对第一部分的误解...我需要放好表情，而不是放错误消息的条件。

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

更新

UPDATE2

1 个答案: