validation - 如何在 vuetify 中添加密码匹配验证?
问题描述
我正在尝试创建一个具有两个字段
password
和rePassword
. 基本上,它们都应该是相同的。
我尝试使用在网上找到的不同代码和不同的方法。其中一些工作但是。它实际上并不适合代码。
这是一段代码:
个人资料.vue:
<v-layout>
<v-flex xs12 sm6>
<v-text-field
v-model="password"
:append-icon="show ? 'visibility' : 'visibility_off'"
:rules="[rules.required, rules.min]"
:type="show ? 'text' : 'password'"
name="password"
label="Enter Password"
hint="At least 8 characters"
counter
@click:append="show = !show"
></v-text-field>
</v-flex>
<v-flex xs12 sm6>
<v-text-field
v-model="rePassword"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
:rules="[rules.required, rules.min]"
:type="show1 ? 'text' : 'password'"
name="input-10-1"
label="Re-enter Password"
hint="At least 8 characters"
counter
@click:append="show1 = !show1"
></v-text-field>
</v-flex>
</v-layout>
这是脚本的样子:
Profile.vue(脚本):
data() {
return {
show: false,
show1: false,
password: 'Password',
rePassword: 'Password',
rules: {
required: value => !!value || 'Required.',
min: v => v.length >= 8 || 'Min 8 characters',
emailMatch: () => ('The email and password you entered don\'t match')
},
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+/.test(v) || 'E-mail must be valid'
],
date: new Date().toISOString().substr(0, 10),
menu: false,
items: ['male', 'female'],
address: '',
title: "Image Upload",
dialog: false,
imageName: '',
imageUrl: '',
imageFile: ''
}
},
methods: {
pickFile() {
this.$refs.image.click()
},
onFilePicked(e) {
const files = e.target.files
if(files[0] !== undefined) {
this.imageName = files[0].name
if(this.imageName.lastIndexOf('.') <= 0) {
return
}
const fr = new FileReader ()
fr.readAsDataURL(files[0])
fr.addEventListener('load', () => {
this.imageUrl = fr.result
this.imageFile = files[0] // this is an image file that can be sent to server...
})
} else {
this.imageName = ''
this.imageFile = ''
this.imageUrl = ''
}
},
}
,
validate() {
if (this.$refs.form.validate()) {
this.snackbar = true
}
},
reset() {
this.$refs.form.reset()
}
如何使用 vuetify 在验证中添加密码匹配功能。谢谢
解决方案
您可以定义自定义规则:
computed: {
passwordConfirmationRule() {
return () => (this.password === this.rePassword) || 'Password must match'
}
}
并使用它
<v-flex xs12 sm6>
<v-text-field
v-model="rePassword"
:append-icon="show1 ? 'visibility' : 'visibility_off'"
:rules="[rules.required, rules.min, passwordConfirmationRule]"
:type="show1 ? 'text' : 'password'"
name="input-10-1"
label="Re-enter Password"
hint="At least 8 characters"
counter
@click:append="show1 = !show1"
/>
</v-flex>
推荐阅读
- azure - 使用 Azure DevOps 创建 NuGet 包时缺少文件
- wordpress - 如何使用 ftp 安装 Wordpress?
- reactjs - 三元回报的单元测试会是什么样子?
- android - 错误 lateinit var 尚未初始化
- azure - 如何在来自 Inspect 元素或媒体播放器的 UI 中的 HTML5 视频播放器中显示 Azure Bob SAS URL
- java - 如何修复线程“main”java.io.StreamCorruptedException中的异常:无效类型代码:AC
- css - css文件未在ejs中加载
- amazon-web-services - 从 AWS S3 下载到 Internet / 数据传出到 Internet
- javascript - 故事书(反应):找不到 main.js
- postgresql - 表 X 上的更新或删除违反了表 Z 上的外键约束 Y