源码在下面
- 表单验证的关键
1.1 给表单添加ref属性
1.2 给el-form-item添加prop属性
1.3 定义表单的验证规则(也可以不需要定义)
1.4 表单提交时，通过this.$refs.表单的ref.validate()文章来源：https://www.toymoban.com/news/detail-626474.html
1.1
1.2
1.3
1.4
源码：文章来源地址https://www.toymoban.com/news/detail-626474.html
<template>
<el-main>
<el-form
:model="listParm"
ref="form"
label-width="80px"
:inline="true"
size="small"
>
<el-form-item>
<el-input
placeholder="请输入姓名"
v-model="listParm.nickName"
></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="请输入电话" v-model="listParm.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" @click="searchBtn">搜索</el-button>
<el-button icon="el-icon-close" style="color: #ff7670" @click="resetBtn"
>重置</el-button
>
<el-button type="primary" icon="el-icon-plus" @click="addBtn"
>新增</el-button
>
</el-form-item>
</el-form>
<el-table :data="tableData" border stripe size="small">
<el-table-column prop="date" label="姓名" align="center"></el-table-column>
<el-table-column prop="name" label="电话" align="center"></el-table-column>
<el-table-column prop="address" label="邮箱" align="center"></el-table-column>
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
icon="el-icon-edit"
@click="editBtn(scope.row)"
>编辑</el-button
>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="deleteBtn(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="paging.pageSize"
:page-sizes="[10]"
:page-size="paging.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="paging.total"
background
style="margin-top: 15px"
>
</el-pagination>
<sys-dialog-vue
:title="dialog.title"
:visible="dialog.visible"
:width="dialog.width"
:height="dialog.height"
@onClose="onClose"
@onConfirm="onConfirm"
>
<div slot="content">
<el-form
:model="addModel"
ref="addRef"
:rules="rules"
label-width="80px"
size="small"
style="margin-right: 40px"
>
<el-row>
<el-col :span="12" :offset="0">
<el-form-item prop="nickName" label="姓名:">
<el-input v-model="addModel.nickName" placeholder="请输入姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" :offset="0">
<el-form-item prop="phone" label="电话:">
<el-input v-model="addModel.phone" placeholder="请输入电话"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" :offset="0">
<el-form-item prop="email" label="邮箱:">
<el-input v-model="addModel.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" :offset="0">
<el-form-item prop="sex" label="性别:">
<el-radio v-model="addModel.sex" label="0">男</el-radio>
<el-radio v-model="addModel.sex" label="1">女</el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12" :offset="0">
<el-form-item prop="username" label="账户:">
<el-input v-model="addModel.username" placeholder="请输入账户"></el-input>
</el-form-item>
</el-col>
<el-col :span="12" prop="password" :offset="0">
<el-form-item prop="username" label="密码:">
<el-input v-model="addModel.password" placeholder="请输入密码"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</sys-dialog-vue>
</el-main>
</template>
<script>
import SysDialogVue from '@/components/dialog/SysDialog.vue';
export default {
// 注册组件
components: {
SysDialogVue,
},
data() {
return {
// 查询数据
listParm: {
nickName: '',
phone: '',
},
// 弹框
dialog: {
title: '',
visible: false,
width: "40%",
},
// 分页
paging: {
pageSize: 10,
total: 0,
},
// 表单绑定数据
addModel: {
nickName: '',
phone: '',
email: '',
sex: '',
username: '',
password: '',
},
// 表单验证规则
rules: {
nickName: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
},
{
validator:function(rule,value,callback){
function getStrLength(str) {
// 当数据库编码为一个汉字占3个字节时，把字符中的每个汉字都替换成'xxx'再得出长度
return str.replace(/[^x00-xff]/g, 'test').length;
}
if (!value) {
callback();
} else if (getStrLength(value) <= 30) {
callback();
} else {
return callback(new Error('不能超过30个字符'))
}
},
}
],
phone: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
}],
email: [
{
required: true,
message: '请输入邮箱',
trigger: 'blur'
},
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
sex: [{
required: true,
message: '请选择性别',
trigger: 'blur'
}],
username: [{
required: true,
message: '请输入账户',
trigger: 'blur'
}],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}]
},
// 表格
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
};
},
methods: {
searchBtn() {
console.log(123);
},
resetBtn() {
},
addBtn() {
this.dialog.visible = true;
this.dialog.title = '新增用户'
},
editBtn(row) {
console.log(row);
},
deleteBtn(row) {
console.log(row);
},
// 分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
// 弹框
onConfirm() {
// 表单的验证
this.$refs.addRef.validate((validate) => {
if (validate) {
this.dialog.visible = false;
} else {
this.$message.error("请完善相关信息");
return false;
}
})
},
onClose() {
this.dialog.visible = false;
}
}
}
</script>
<style lang="sass" scoped>
</style>
到了这里，关于使用element ui表单验证的流程的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
