elementui input校验
时间: 2023-09-06 15:09:32 浏览: 54
Element UI 提供了丰富的表单验证可以用于校验输入框。你可以通过以下步骤进行 Element UI Input 校验:
1. 首先,确保已经引入 Element UI 组件库并进行了相关配置。
2. 在需要进行校验的表单中,使用 `<el-form>` 组件包裹起来,并设置合适的校验规则和绑定的数据。
3. 在需要校验的 `<el-input>` 组件上,使用 `:rules` 属性绑定相应的校验规则。
4. 定义校验规则对象,可以使用内置的验证规则,也可以自定义验证规则。
下面是一个示例代码,展示了如何在 Element UI 中进行输入框校验:
```vue
<template>
<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-item>
<el-button type="primary" @click="submitForm">提交</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: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 校验通过,提交表单
// do something
} else {
// 校验不通过,提示用户错误信息
}
});
}
}
};
</script>
```
在上述示例中,`rules` 对象定义了两个校验规则,其中 `required` 表示必填项,`message` 是提示信息,`trigger` 定义了何时触发校验。
当点击提交按钮时,通过 `this.$refs.form.validate` 方法进行表单校验,校验结果会传入回调函数中。如果校验通过,可以执行相应的操作;如果校验不通过,可以提示用户相应的错误信息。
这只是一个简单的示例,你可以根据具体业务需求进行更复杂的校验规则定义和处理。详细的文档可以参考 Element UI 官方文档:[https://element-plus.org/#/en-US/component/form](https://element-plus.org/#/en-US/component/form)