[英]How validate confirm password with vue/quasar
I write a code to connect to an application in vue/quasar/C# I'm just begin with vue.我编写了一个代码来连接到 vue/quasar/C# 中的应用程序我只是从 vue 开始。 And I don't understand how rules run.
而且我不明白规则是如何运行的。 I write this to check input is not empty for password/ConfimPassword
我写这个是为了检查密码/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>
I check on my method if (this.loginData.password == this.loginData.passwordConfirm) {...
But I want modify my v-bind:rules and display error like empty field and put 'Password not match' But I have always errors sysntaxs... Thanks for your helps我检查我的方法
if (this.loginData.password == this.loginData.passwordConfirm) {...
但我想修改我的 v-bind:rules 并显示错误,如空字段并输入“密码不匹配”但我有总是错误 sysntaxs...感谢您的帮助
I try我试试
v-bind:rules="[val => val && val.length > 0 || 'saisissez quelque chose :)',val => val != $refs.fldPasswordChange || 'Mots de passe différents']"
To have 2 controls but seems second not fire有 2 个控件,但似乎第二个不火
I try what Dean suggest我试试院长的建议
<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>
and和
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 :-)']
}
},
But seems second controls not fire.但似乎第二个控件不火。 If I don't fill confimPassword, i've message but if I put 2 different password nothing.. I put breakpoint, all value is good.
如果我不填写 confimPassword,我会发送消息,但如果我没有输入 2 个不同的密码。我设置了断点,所有值都很好。 Cetainly a problem of syntax in my condition.. when I put
在我的情况下肯定是一个语法问题..当我把
(v) => v != this.$refs.fldPasswordChange.value || "Mots de passe différents"
without (v) =>:,v ||没有 (v) =>:,v || "Saisissez quelquechose :-)", no message error
“Saisissez quelquechose :-)”,没有消息错误
<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>
and和
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 :-)']
}
},
It's just a misunderstanding about first part... I need put good expression not condition to put error message.这只是对第一部分的误解......我需要用良好的表达而不是条件来放置错误信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.