element Plus 的validateField方法示例
时间: 2024-05-05 13:21:03 浏览: 5
Element Plus 是一款基于 Vue.js 的 UI 组件库,它提供了一系列的表单验证方法,其中 validateField 就是其中之一。下面是一个示例:
```html
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit() {
this.$refs.form.validateField('username', (errorMsg) => {
if (errorMsg) {
// 验证失败
console.log(errorMsg)
} else {
// 验证成功
console.log('验证通过')
}
})
}
}
}
</script>
```
在上面的示例中,我们定义了一个简单的表单,其中包含了一个用户名和一个密码输入框。我们使用了 Element Plus 提供的表单验证规则来验证输入的内容。当用户点击提交按钮时,我们调用了 validateField 方法来验证用户名输入框中的内容。如果验证失败,我们会打印出错误信息;如果验证通过,我们会打印出“验证通过”的信息。