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

Question

我编写了一段代码来连接到 vue/quasar/C# 中的应用程序\n我刚刚开始使用 vue。我不明白规则是如何运行的。\n我写这个是为了检查密码/ConfimPassword 的输入不为空

\n

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

\n

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

\n

更新

\n

我尝试

\n

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

\n

有 2 个控制装置，但似乎第二个不开火

\n

更新2

\n

我尝试迪恩的建议

\n

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

\n

和

\n

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

\n

但似乎第二控制不火。如果我不填写confimPassword，我会收到消息\n但如果我输入2个不同的密码什么都没有..\n我设置了断点，所有值都很好。在我的情况下，这肯定是一个语法问题..当我把

\n

(v) => v != this.$refs.fldPasswordChange.value || "Mots de passe diff\xc3\xa9rents"\n

\n

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

\n

Answer 1

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

\n\n

和

\n\n

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

\n\n

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

\n

Answer 2

你可以简单地在规则声明中检查这个条件，如下所示

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