パスワード欄を見てください。ボタンがクリックされるPasswordとConfirm Passwordフィールドが表示されます。Change Password?
以下のコードは正常に動作し、期待どおりにフォームを検証しますが、使用するとv-show検証しませんv-if。
私は何と何をするのかを理解しv-showてv-ifいます。その中の機能はdata(){}、element-uiのドキュメントにある方法です。ドキュメントの URL は次のとおりです: http://element.eleme.io/#/en-US/component/form#custom-validation-rules
<template lang="pug">
el-dialog( width="600px", title="Users", :visible.sync="dialogVisible")
el-form.demo-ruleForm(:model="editedItem", status-icon, :rules="formRules", ref="userForm", label-width="140px")
el-form-item(label="Name", prop="firstName")
el-input(v-model="editedItem.name", auto-complete="off")
template(v-if="!changePassword")
el-form-item
el-button(@click="changePassword = true") Change Password?
template(v-else)
el-form-item(label="Password", prop="password")
el-input(type="password", v-model="editedItem.password", auto-complete="off")
el-form-item(label="Confirm Password", prop="confirmPassword")
el-input(type="password", v-model="editedItem.confirmPassword", auto-complete="off")
.dialog-footer(slot="footer")
el-button(type="primary", @click="submitForm('userForm')") Save
</template>
<script>
export default {
name: 'dialog-add-edit-user',
props: {
editedItem: Object,
},
data () {
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password'))
} else {
if (this.confirmPassword !== '') {
this.$refs.userForm.validateField('confirmPassword')
}
callback()
}
}
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('Please input the password again'))
} else if (value !== this.editedItem.password) {
callback(new Error('Two inputs don\'t match!'))
} else {
callback()
}
}
return {
formRules: {
password: [
{
validator: validatePass,
trigger: 'blur'
}
],
confirmPassword: [
{
validator: validatePass2,
trigger: 'blur'
}
]
},
dialogVisible: false,
changePassword: false,
editedItem: {
name: '',
password: '',
confirmPassword: ''
}
}
},
methods: {
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit('save-item')
console.log('submit!')
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>