使用element ui表单验证的流程 form验证

1.1 给表单添加ref属性
1.2 给el-form-item添加prop属性
1.3 定义表单的验证规则(也可以不需要定义)
1.4 表单提交时，通过this.$refs.表单的ref.validate()

 

 

 

 源码：

<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>