vue+element 学习之路（五）自定义表单校验

示例：

非空校验：
格式校验：

几个常用的校验规则
required：是否非空
max：最大字符数
min：最小字符数

首先给表单绑定校验规则，表单加上ref属性，最后方便遍历表单校验
定义规则：
rules中定义的校验方法通过prop属性传递


当然了这只是第一步校验，当输入框变化时进行校验，为了保证数据正确性，我们通常在提交表单时需要再校验一次

控制台
源码：

<template>
<div>
    <el-form :model="reUser" :rules="rules" ref="reUser">
        <!-- 隐藏数据 -->
        <input type="hidden" v-model="reUser.userId"/>
        <!-- 隐藏数据 -->

        <!-- 第一行 -->
        <el-row :gutter="30">
            <el-col :span="8">
                <el-form-item label="姓名" label-width="80px" prop="name">
                    <el-input placeholder="请填写真实姓名" v-model="reUser.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                    <el-select placeholder="请选择性别" v-model="reUser.gender">
                        <el-option label="男" value="M"></el-option>
                        <el-option label="女" value="F"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="所在地">
                    <el-cascader
                        size="large"
                        :options="options"
                        v-model="selectedOptions"
                        @change="handleChange"
                        >
                    </el-cascader>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="30">
            <el-col :span="12">
                <el-form-item label="手机号码" label-width='80px' prop="telphone">
                    <el-input placeholder="请输入正确的手机号码" v-model="reUser.telphone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" label-width='80px' prop="email">
                    <el-input placeholder="请输入正确邮箱" v-model="reUser.email"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="30">
            <el-col :span="12">
                <el-form-item label="QQ" label-width="80px" prop="qq">
                    <el-input placeholder="请输入QQ号码" v-model="reUser.qq"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="Wechat" label-width="80px" prop="wechat">
                    <el-input placeholder="请输入微信号" v-model="reUser.wechat"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 第四行 按钮 -->
        <el-row>
            <el-col :span="6" :offset="18" :gutter="20">
                <el-button type="primary" @click="save()">保存</el-button>
                <el-button>取消</el-button>
            </el-col>
        </el-row>
    </el-form>
</div>
</template>


<script>

//地区级联插件
import { provinceAndCityData,CodeToText,TextToCode } from 'element-china-area-data';

export default {
    name:'userInfo',
    data(){
        //自定义校验规则 正则表达式校验
        //手机格式
        let validateTelphone = /^1[34578]\d{9}$/;
        let isTelphone = (rule,value,callback) =>{
            if(!validateTelphone.test(value)){
                return callback(new Error('手机格式不正确！'))
            }else{
                callback()
            }
        }
        //邮箱格式
        let validateEmail =   /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        let isEmail = (rule,value,callback) =>{
            if(!validateEmail.test(value)){
                return callback(new Error('邮箱格式不正确！'))
            }else{
                callback()
            }
        }
        return{
            options:provinceAndCityData,
            selectedOptions:[],
            reUser:{
                userId:'',
                name:'',
                gender:'',
                localtionCode:'',
                telphone:'',
                email:'',
                qq:'',
                wechat:'',
            },
            

            //字段校验 以prop定位 trigger:blur表示在失去焦点时进行校验 change表示值改变就校验
            rules:{
                name:[
                    {required:true,message:'请输入姓名',trigger:'blur'},
                    {min:2,max:20,message:'姓名不符合规范',trigger:'blur'}
                ],
                gender:[
                    {required:true,message:'请选择性别',trigger:'change'}
                ],
                telphone:[
                    {required:true,message:'请输入手机号码',trigger:'blur'},
                    {validator:isTelphone}
                ],
                email:[
                    {required:true,message:'请输入邮箱号码',trigger:'blur'},
                    {validator:isEmail}
                ],
                qq:[
                    {max:16,message:'QQ号码长度超出限制',trigger:'blur'}
                ],
                wechat:[
                    {max:30,message:'微信号长度超出限制',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        handleChange(value){
            this.reUser.localtionCode = value[0]+value[1]
        },
        save(){
            //提交前校验
            this.$refs['reUser'].validate((valid)=>{
                if(valid){
                    console.log(this.reUser)
                }else{
                    console.log('error')
                }
            }) 
        }
    }
}
</script>

<style>
</style>