vue集成element对表单字段进行验证
前言
vue集成element对表单字段进行验证
一、element是什么?
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
二、使用步骤
1.完整引入库
你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
在 main.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)
});
以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。
2.按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
完整组件列表和引入方式(完整组件列表以 components.json 为准)
import Vue from 'vue';
import {
Pagination,
Dialog,
Autocomplete,
Dropdown,
DropdownMenu,
DropdownItem,
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
RadioGroup,
RadioButton,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Select,
Option,
OptionGroup,
Button,
ButtonGroup,
Table,
TableColumn,
DatePicker,
TimeSelect,
TimePicker,
Popover,
Tooltip,
Breadcrumb,
BreadcrumbItem,
Form,
FormItem,
Tabs,
TabPane,
Tag,
Tree,
Alert,
Slider,
Icon,
Row,
Col,
Upload,
Progress,
Spinner,
Badge,
Card,
Rate,
Steps,
Step,
Carousel,
CarouselItem,
Collapse,
CollapseItem,
Cascader,
ColorPicker,
Transfer,
Container,
Header,
Aside,
Main,
Footer,
Timeline,
TimelineItem,
Link,
Divider,
Image,
Calendar,
Backtop,
PageHeader,
CascaderPanel,
Loading,
MessageBox,
Message,
Notification
} from 'element-ui';
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
https://element.eleme.cn/#/zh-CN/component/quickstart
三、使用rules
1.vue表单
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
<el-form-item label="用户名称:" prop="userName">
<el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
</el-form-item>
</el-form>
:代表这是一个表单
-> ref:表单被引用时的名称,标识
-> rules:表单验证规则
-> model:表单数据对象
-> label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值
-> :表单中的每一项子元素
-> label:标签文本
-> prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的
:输入框
-> v-model:绑定的表单数据对象属性
-> maxlength:最大字符长度限制
2.data 数据
data() {
return {
// 省略别的数据定义
...
// 表单验证
formRules: {
userName: [
{required: true,message: "请输入用户名称",trigger: "blur"}
]
}
}
}
formRules:与上文 ‘表单内容’ 中 表单的 :rules 属性值相同
userName:与上文 ‘表单内容’ 中 表单子元素的 prop 属性值相同
验证内容是:必填,失去焦点时验证,如果为空,提示信息为 ‘请输入用户名称’
当然你也可以写在行内
<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
<el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
<el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
</el-form-item>
</el-form>
3.完整示例代码如下
表单1. rules.vue
<template>
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane label="表单" name="rulesPane" @tab-click="handleClick">
<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
<el-form-item label="用户名称:" prop="userName">
<el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
</el-form-item>
<el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
<el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
</el-form-item>
<el-form-item label="银行卡号:" prop="accountNumber">
<el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
<el-button @click="cancel">取消</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { validateAccountNumber } from "@/utils/validate";
// 判断银行卡账户是否正确
const validatorAccountNumber = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入账户信息"));
} else {
if (validateAccountNumber(value)) {
callback();
} else {
return callback(new Error('账号格式不正确'))
}
}
};
export default {
name: "rules",
data() {
return {
activeName: "rulesPane",
defaultProps: {
children: "children",
label: "label"
},
rulesForm: {
},
// 表单验证
formRules: {
userName: [
{
required: true,
message: "请输入用户名称",
trigger: "blur"
}
],
accountNumber: [
{
required: true,
validator: validatorAccountNumber,
trigger: "blur"
}
],
}
};
},
created() {},
mounted() {},
methods: {
handleClick(tab) {
},
// 取消
cancel() {
},
// 保存
onSubmit(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log("success submit!!");
} else {
console.log("error submit!!");
return false;
}
});
}
}
};
</script>
<style lang="scss">
</style>
validate.js
/* 银行账户 */
export function validateAccountNumber(str) {
const reg = /^([1-9]{1})(\d{14}|\d{18})$/
return reg.test(str)
}
引用自https://blog.csdn.net/qq_41402200/article/details/86016313?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161761181416780357273883%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=161761181416780357273883&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-1-86016313.first_rank_v2_pc_rank_v29&utm_term=%E5%9C%A8vue%E4%B8%AD%E4%BD%BF%E7%94%A8rules%E5%AF%B9%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E8%BF%9B%E8%A1%8C%E9%AA%8C%E8%AF%81