ElementUI怎么实现表单验证

ElementUI可以通过使用内置的表单验证规则或自定义验证规则来实现表单验证。具体步骤如下：

1. 在表单中添加需要验证的表单项，例如：

<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>

2. 在表单中添加验证规则，例如：

<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>

data() {
return {
form: {
username: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
}

3. 自定义验证规则，例如：

<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>

data() {
return {
form: {
username: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: validateUsername, trigger: 'blur' }
]
}
}
},
methods: {
validateUsername(rule, value, callback) {
if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
callback(new Error('用户名必须是4-16位字母、数字、下划线、减号'))
} else {
callback()
}
}
}

以上就是ElementUI实现表单验证的基本步骤。