el-form校验规则,单独验证某一项是否通过校验
在Vue.js中使用Element UI库时,可以通过this.$refs
来引用el-form
的实例,并使用validateField
方法来单独验证表单中的某一项是否通过验证。
以下是一个简单的例子:
<template>
<el-form ref="formRef">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-button @click="validateUsername">验证用户名</el-button>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
},
};
},
methods: {
validateUsername() {
this.$refs.formRef.validateField('username', (valid) => {
if (valid) {
console.log('用户名验证通过');
} else {
console.log('用户名验证未通过');
}
});
},
},
};
</script>
在这个例子中,我们定义了一个el-form
和一个el-form-item
,其中el-form-item
有一个prop
属性设置为username
。我们还定义了一个方法validateUsername
,在这个方法中,我们调用了this.$refs.formRef.validateField
方法来验证名为username
的表单项。如果验证通过,会在控制台输出“用户名验证通过”,如果验证未通过,则输出“用户名验证未通过”。
评论已关闭