详解elementUI表单的验证规则---vue(基本用法)

1.UI效果图

 2.html代码详解

<template>
    <div id="app">
        <el-form inline :model="formdata" :rules="rules" ref="elfrom">
            <el-form-item label="审批人" prop="username">
                <el-input v-model="formdata.username" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="formdata.region" placeholder="活动区域">
                    <el-option label="上海" value="上海">上海</el-option>
                    <el-option label="北京" value="北京">北京</el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button autofocus size="medium" type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

2.1.el-form标签

这个标签只有一个

2.2.el-form标签上的属性

• 2.2.1 inline：控制样式在一行与否

• 2.2.2 :model：动态输入的对象
  

• 2.2.3 :rules：验证规则

• 2.2.4 ref：获取dom结构，用在提交时this.$refs.elform.validate( ()=>{} ),ref的内容可以任意名称

2.3.el-form-item标签上的属性

每一个表单部分由一个el-form-item标签包裹着

• 2.3.1.label：对应的标题名称
• 2.3.2.prop：验证规则rules里面的属性，必须和fromdata里面的属性对应，让代码知道是为哪个部分验证

3.js代码

export default {
    name: 'app',
    data (){
        const userValidator = (rule, value, callback) => {
            if(value.length > 3){
                callback();
            }else{
                callback( new Error('用户长度必须大于3') );
            }
        }
        return {
            formdata: {
                username: '',
                region: ''
            },
            rules: {
                username: [
                    { required: true, trigger: 'change', message: '用户名必须录入' },
                    { validator: userValidator, trigger: 'change'}
                ]
            }
        }
    },
    methods: {
        onSubmit(){
            this.$refs.elfrom.validate( (isValidate, errordata)=> {
                console.log(isValidate);
                console.log(errordata);
            })
        }
    }

}

3.1.验证规则的顺序

3.1.1.第一步

验证username的第一条对象里面的规则，即，{ required: true,trigger:'change',message:'用户名必须录入'}

即，message:'用户名必须录入'

3.1.2.第二步

验证username的第二条对象里面的规则，即，{validator：userValidator,trigger:'change'}

 

 即，new Error('用户长度必须大于3')

3.1.3.第三步

点击提交之后的验证this.$refs.elform.validate()

3.2.注意userValidator的位置