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

转载

mob604757037cf3 2021-10-09 15:40:00

文章标签 vue elementui 用户名 html 表单 文章分类 后端开发

1.UI效果图

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

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);
            })
        }
    }

}