element-ui表单必填校验
时间: 2023-07-29 20:08:37 浏览: 145
element-ui中的form表单校验可以通过以下步骤实现:
1. 在form表单中添加需要校验的表单项,例如:
```
<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-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
</el-form>
```
2. 在data中定义form和rules对象,例如:
```
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
]
}
}
}
```
3. 在methods中定义submit方法,例如:
```
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
// 表单校验通过,执行提交操作
} else {
// 表单校验不通过,提示错误信息
}
});
}
}
```
4. 在submit按钮中调用submit方法,例如:
```
<el-button type="primary" @click="submit">提交</el-button>
```
以上就是element-ui中form表单校验的基本步骤。需要注意的是,校验规则可以根据实际情况进行自定义,例如添加正则表达式校验等。
阅读全文