###
Vue2 中使用
Element-UI 验证器
在
Vue2 项目中集成并配置
Element-UI 的
表单验证功能，可以按照如下方式实现：
#### 安装依赖库
确保已经安装 `
element-ui` 和其样式文件[^1]。
```bash
npm install
element-ui --save
```
#### 引入
Element-UI 组件
在项目的入口文件（通常是 main.js 或 app.js）引入整个
Element UI 库及其默认主题样式:
```javascript
// main.js or app.js
import
Vue from '
vue';
import
ElementUI from '
element-ui';
import '
element-ui/lib/theme
-chalk/index.css'; // 默认主题
import App from './App.
vue';
Vue.use(
ElementUI);
new
Vue({
el: '#app',
render: h => h(App),
});
```
#### 创建带有验证规则的
表单项
定义自定义校验函数来满足特定需求，并将其应用于 `<el
-form-item>` 标签中的
prop 属性。这里展示了一个简单的用户名字段验证例子[^3]：
```html
<template>
<div id="example">
<el
-form :model="rule
Form" status
-icon :rules="rules" ref="rule
Form" label
-width="100px" class="demo
-rule
Form">
<!
-- 用户名输入框
-->
<el
-form-item label="用户名"
prop="username">
<el
-input v
-model="rule
Form.username"></el
-input>
</el
-form-item>
<el
-button type="primary" @click="submit
Form('rule
Form')">提交</el
-button>
</el
-form>
</div>
</template>
<script>
export default {
data() {
var
validateUsername = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入用户名'));
}
setTimeout(() => { // 模拟异步请求
if (!Number.isInteger(value)) {
callback();
} else {
callback(new Error('用户名不能为纯数字'));
}
}, 1000);
};
return {
rule
Form: {
username: ''
},
rules: {
username: [
{ req
uired: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
{ validator:
validateUsername, trigger: 'change' }
]
};
};
},
methods: {
submit
Form(
formName) {
this.$refs[
formName].
validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
```
上述代码片段展示了如何创建一个包含用户名字段的
表单，并为其设置了基本的必填项、长度以及自定义逻辑验证规则。当用户尝试提交
表单时会触发这些验证条件。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
