Element Form表单实践（上）

时间 2020-05-29

标签 element form 表单实践栏目 HTML 繁體版

原文原文链接

做者：小土豆biubiubiujavascript

博客园：www.cnblogs.com/HouJiao/css

掘金：juejin.im/user/58c61b…html

微信公众号：土豆妈的碎碎念（扫码关注，一块儿吸猫，一块儿听故事，一块儿学习前端技术）前端

码字不易，点赞鼓励哟~vue

前言

本篇文章主要是实践一下Element中的 Form 表单组件。java

本篇内容较为简单，基本上是参照着文档将表单部份内容实践了一下，后续会持续更新表单的一些经常使用功能。ios

同时下一篇文章 Element Form表单实践（下） 将会分享项目开发中的一个表单实践，记录在这个过程当中遇到的一些问题。npm

项目环境

为了简单快速，我使用引入cdn静态资源的方式搭建项目的开发环境。element-ui

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Form表单实践</title>
    
    <!-- vue: 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- element: 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element: 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
</head>
<body>
    <div id="box">
        <span> {{message}} </span>
        <el-divider></el-divider>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                message: "Element Form表单实践"
            }
        })
    </script>
</body>
</html>
复制代码

环境准备好后，直接本地打开页面，就能看到效果。json

接着咱们就开始Element Form表单的实践。

使用Form组件

典型表单

首先按照官方文档咱们先实践一下典型表单。

典型表单的完整代码以下：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Form表单实践</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
</head>
<body>
    <div id="box">
        <span> {{message}} </span>
        <el-divider></el-divider>
        <!-- 典型表单 -->
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="活动名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送">
                <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
                <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源">
                <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">当即建立</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script> var vm = new Vue({ el: '#box', data: { message: "Element Form表单实践", form: { name: '', // 活动名称 region: '', // 活动区域 date1: '', // 活动时间-日期 date2: '', // 活动时间-时间 delivery: false, // 即时配送 type: [], // 活动性质 resource: '', // 特殊资源 desc: '' // 活动形式 } }, methods: { onSubmit() { console.log('submit!'); } } }) </script>
</body>
</html>
复制代码

浏览器打开页面：

能够看到表单组件已经显示到了页面上。

接下来，咱们就这个表单组件的一些重要的特性进行学习。

表单属性

表单属性指的是设置在el-form元素上的属性

model

model属性在前面的用法以下：

<!-- 典型表单 -->
<el-form ref="form" :model="form" label-width="80px">

</el-form>
复制代码

model属性是表单的数据，它绑定的form数据以下：

form: {
    name: '',         // 活动名称
    region: '',       // 活动区域
    date1: '',        // 活动时间-日期
    date2: '',        // 活动时间-时间
    delivery: false,  // 即时配送
    type: [],         // 活动性质
    resource: '',     // 特殊资源
    desc: ''          // 活动形式
}
复制代码

form数据中的每一项分别对应表单中的一个el-form-item项，好比name对应的是活动名称，那么el-form-item写法以下：

<el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
</el-form-item>
复制代码

这里须要注意表单控件el-input的v-model并无绑定在el-form-item上:
input控件对应的是el-input,v-model绑定在el-input上
select控件对应的是el-select
checkbox控件对应的是el-checkbox-group+el-checkbox,v-model绑定在el-checkbox-group上
radio控件对应的是el-radio-group+el-radio,v-model绑定在el-radio=group上
switch切换控件对应的是el-switch,v-model绑定在el-switch上

model绑定的form数据

接下来咱们在探究一下这个form数据。

为了探究这个form数据，须要作下面的三件事：

01：在"当即建立"按钮绑定的onSubmit函数中打印form数据
02：填写表单信息
03：点击"当即建立"按钮,查看form数据打印结果
复制代码

第一步：在当即建立按钮绑定的onSubmit函数中打印form数据。

methods: {
    onSubmit() {
        console.log(this.form);
    }
}
复制代码

第二步：填写表单信息。

第三步：点击当即建立按钮,查看form数据打印结果。

能够看到form数据包含了咱们表单填写的内容，我将form中的字段、字段的值和表单控件的关系梳理一下。

属性/字段	描述	控件类型	值	值的来源	类型
name	活动名称	`input`	"element form表单实践"	`input`输入框的内容	String
region	活动区域	`select`	"shanghai"	选中的`select`的value值	String
date1	活动时间-日期	`el-time-picker`	Thu May 07 2020 00:00:00 GMT+0800 (中国标准时间)	日期控件选择的内容	Date
date2	活动时间-时间	`el-time-picker`	Thu May 07 2020 18:24:39 GMT+0800 (中国标准时间)	时间控件选择的内容	Date
delivery	即时配送	`el-switch`	true	switch的选择结果	Boolean
type	活动性质	`checkbox`	["美食/餐厅线上活动","地推活动"]	选中的`checkbox`的label值	Boolean
resource	特殊资源	`radio`	"线上品牌商赞助"	选中的`radio`的label值	String
desc	活动形式	`input`	"其余"	`input`输入框内容	String

能够看到，表单el-form的model属性绑定的form数据和表单中的内容是一致的，所以在平常项目开发中，表单信息填写完成，点击提交按钮，能够直接将this.form做为请求的参数直接发送给后端。

不过这里颇有必要对this.form这个数据进行一些完善。

在前面的代码中，最终form中的type值和resource值都是中文的结果，这样的中文数据传递到后端，对后端的逻辑处理是很不友好的。

因此在平常的项目开发中，先后端会对这样的数据有一个默认的约定关系：

// 活动性质
{   'foodOnlineActivities': '美食/餐厅线上活动',
    'earthPushingActivity': '地推活动',
    'offlineThemeActivities': '下线主题活动'，
    'brandExposure': '单纯品牌曝光',
}
// 活动形式
{   'online': '美食/餐厅线上活动',
    'offline': '地推活动'
}
复制代码

或者在简单一些的约定：

// 活动性质
{   'foodOnlineActivities': '1',
    'earthPushingActivity': '2',
    'offlineThemeActivities': '3'，
    'brandExposure': '4',
}
// 活动形式
{   'online': '1',
    'offline': '2'
}
复制代码

对应的咱们的前端代码须要修改为下面这样：

<el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="form.type">
        <el-checkbox label="1" name="type">美食/餐厅线上活动</el-checkbox>
        <el-checkbox label="2" name="type">地推活动</el-checkbox>
        <el-checkbox label="3" name="type">线下主题活动</el-checkbox>
        <el-checkbox label="4" name="type">单纯品牌曝光</el-checkbox>
    </el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="form.resource">
        <el-radio label="1">线上品牌商赞助</el-radio>
        <el-radio label="2">线下场地免费</el-radio>
    </el-radio-group>
</el-form-item>
复制代码

接着在选择对应的选项，查看form数据的结果：

修改以后的form数据传递到后端之后，不论是对数据进行保存或者判断等逻辑，都比较简单，并且不会由于中文的编码而出现问题。

关于form数据最后的一点就是form的初始值。

咱们看到form数据默认都是空值（form字段的类型大多都不相同，这里将上面的初始值统称为空值），实际上咱们能够为其指定默认值：即直接在data中给form.xx设置默认值。

这里将上面type和resource设置的值恢复成了中文，项目开发中记得设置成上面的那种形式。

form: {
    name: '我是初始化设置的活动名称', // 活动名称
    region: 'beijing',                // 活动区域
    date1: new Date(),                // 活动时间-日期
    date2: new Date(),                // 活动时间-时间
    delivery: true,                   // 即时配送
    type: ['单纯品牌曝光'],           // 活动性质
    resource: '线上品牌商赞助',       // 特殊资源
    desc: '我是初始化设置的活动形式'  // 活动形式
}
复制代码

设置了默认值后，咱们刷新页面，表单中的内容就是咱们设置的值。

注意：对于select、checkbox和radio这几个控件，form字段中的值必需要和对应控件的label值一致，不然控件匹配不到，对应的内容也就没法反填到表单中。

rules

表单属性rules是用于设置表单的验证规则，咱们来实践一下。

<!-- index.html -->
<el-form ref="form" :model="form" :rules="addFormRules" label-width="80px">

    <!-- 中间未修改的代码省略-->
    
</el-form>
复制代码

能够看到:rule做用在el-form上，而且绑定了一个变量addFormRules。

接着咱们就在addFormRules中编写活动名称name的验证规则。

// 有部分未修改的代码省略
var vm = new Vue({
    el: '#box',
    data: {
        addFormRules: {
            name: [{
                required: true, // name字段是否必填,true:必填 false:非必填
                trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则
                message: "请输入活动名称",  // 若是没有填写时的错误提示语
            },{
                min: 5,         // 字段最小长度
                max: 10,        // 字段最大长度
                trigger: 'blur',    // 在何时触发验证,blur:在元素失去焦点的时候验证规则
                message: "活动名称长度在5-10个字符",    // 不知足规则时显示的错误提示语
            }]
        }
    }
})
复制代码

在addFormRules里面咱们定义了name字段，该字段是一个数组，数组的每一项又是一个json。
就咱们编写的这个验证规则，数组中的第一个json元素编写的是活动名称字段的必填验证规则，json中的每个键值对的含义注释中都有写到;数组中的第二个json元素编写的是活动名称字段的长度验证规则。

那么到这里还有最重要的一步，咱们的这个规则才能生效：在el-form-item上设置prop属性。

<!-- index.html -->
<el-form ref="form" :model="form" :rules="addFormRules" label-width="80px">

    <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    
    <!-- 中间未修改的代码省略-->
    
</el-form>
复制代码

能够看到prop属性的值就是form中定义的name字段，只有这样addFormRules中定义的对name的校验规则才能和对应的表单关联起来，不然验证规则是不会生效的。

这里须要注意的是，表单el-form上绑定的form数据中的字段、prop设置的值以及rule绑定的addFormRules数据中的字段，这三个必须都要一致，不然校验会出现问题。

label-position、label-width、label-suffix

这三个表单属性都是用于设置表单域的标签。

label-position用于设置标签域的对齐方式(默认右对齐)；label-width用于设置标签域的宽度；label-suffix用于设置标签域的后缀。

<el-form ref="form" :model="form" :rules="addFormRules" label-position="left" label-width="120px" label-suffix=":">
    
    <!-- 中间未修改的代码省略-->
    
</el-form>
复制代码

status-icon

<el-form ref="form" :model="form" :rules="addFormRules" label-width="120px" status-icon="true">
    
    <!-- 中间未修改的代码省略-->
    
</el-form>
复制代码

表单方法

validate

表单方法validate是对整个表单进行校验的方法，参数为一个回调函数。

该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未经过校验的字段。若不传入回调函数，则会返回一个promise。

下面咱们就来实践一下这个表单方法。

主要的改动就是在提交表单的时候调用validate方法，打印出回调函数中的两个参数。

<el-form ref="form" :model="form" :rules="addFormRules" label-width="120px" label-suffix=":" :status-icon="statusIcon">
    
    <!-- 中间未修改的代码省略-->
    <el-form-item>
        <el-button type="primary" @click="onSubmit">当即建立</el-button>
        <el-button>取消</el-button>
    </el-form-item>
</el-form>
<script> var vm = new Vue({ el: '#box', data: { message: "Element Form表单实践", statusIcon: true, form: { name: '我是初始化设置的活动名称', // 活动名称 region: 'beijing', // 活动区域 date1: new Date(), // 活动时间-日期 date2: new Date(), // 活动时间-时间 delivery: true, // 即时配送 type: ['单纯品牌曝光'], // 活动性质 resource: '线上品牌商赞助', // 特殊资源 desc: '我是初始化设置的活动形式' // 活动形式 }, addFormRules: { name: [{ required: true, // name字段是否必填,true:必填 false:非必填 trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则 message: "请输入活动名称", // 若是没有填写时的错误提示语 },{ min: 5, // 字段最小长度 max: 10, // 字段最大长度 trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则 message: "活动名称长度在5-10个字符", // 不知足规则时显示的错误提示语 }] } }, methods: { onSubmit() { this.$refs['form'].validate((validate,failedInfo) => { console.log('validate:') console.log(validate); console.log('failedInfo:') console.log(failedInfo); }) } } }) </script>
复制代码

表单验证成功时validate和failedInfo的打印结果：

表单验证失败时validate和failedInfo的打印结果：

前面咱们只编写了name字段的验证规则，所以在表单提交调用validate方法时，只会对name字段进行验证。

其实对于咱们平常的开发来讲会比较关注第一个参数，当回调函数中的第一个参数为true时，表示表单验证成功，就能够将表单数据传递到后端；相反的当第一个参数为falses时，表示表单验证失败，咱们就能够给用户一个错误提示。

methods: {
    onSubmit() {
        this.$refs['form'].validate((validate,failedInfo) => {
            if(validate){
                // 将表单数据发送到后端
                // 发送 POST 请求
                axios.post(url, this.form).then(function (response) {
                    // 处理后端返回的响应数据
                    
                });
             }else{
                // 提示用户
                this.$message({
                    message: '表单数据格式有误,请检查后从新提交.',
                    type: "error",
                    center: true
                });
           }
        })
    }
}
复制代码

这里有必定须要注意，回调函数最好写成箭头函数的形式，这样在回调函数内部的this表示的是Vue实例对象。若是使用普通的函数声明function，则回调函数内部的this指向的是windows对象。

resetFields

表单属性resetFields对整个表单进行重置，将全部字段值重置为初始值而且移除校验结果。

本次改动就是将以前的取消按钮改成重置按钮，而且在点击重置按钮的时候调用resetFields方法。

<el-form ref="form" :model="form" :rules="addFormRules" label-width="120px" label-suffix=":" :status-icon="statusIcon">
    
    <!-- 中间未修改的代码省略-->
    
    <el-form-item>
        <el-button type="primary" @click="onSubmit">当即建立</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>
<script> var vm = new Vue({ el: '#box', data: { message: "Element Form表单实践", statusIcon: true, form: { name: '我是初始化设置的活动名称', // 活动名称 region: 'beijing', // 活动区域 date1: new Date(), // 活动时间-日期 date2: new Date(), // 活动时间-时间 delivery: true, // 即时配送 type: ['单纯品牌曝光'], // 活动性质 resource: '线上品牌商赞助', // 特殊资源 desc: '我是初始化设置的活动形式' // 活动形式 }, addFormRules: { name: [{ required: true, // name字段是否必填,true:必填 false:非必填 trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则 message: "请输入活动名称", // 若是没有填写时的错误提示语 },{ min: 5, // 字段最小长度 max: 10, // 字段最大长度 trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则 message: "活动名称长度在5-10个字符", // 不知足规则时显示的错误提示语 }] } }, methods: { onSubmit() { this.$refs['form'].validate((validate,failedInfo) => { console.log('validate:') console.log(validate); console.log('failedInfo:') console.log(failedInfo); }) }, resetForm(){ this.$refs['form'].resetFileds(); } } }) </script>
复制代码

仔细查看重置之后的结果，会发现只有活动名称字段的值恢复了初始值，而其他咱们修改了表单信息的空间均没有重置为初始值。

这里须要注意resetFileds方法是将表单的值设置为初始值，而不是空值。初始值就是在组件的data中设置的值，因此咱们点击重置的时候活动名称这个空间的值变回了我是初始化设置的活动名称。

这样的效果显然是不对的。

不过缘由也很简单，就是咱们没有给其余的表单项设置prop属性。因此咱们要注意，在使用resetFileds时，必须给表单项el-form-item设置prop值，不然没法进行重置。

<el-form ref="form" :model="form" :rules="addFormRules" label-width="120px" label-suffix=":" :status-icon="statusIcon" >
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
        <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="活动时间" >
        <el-col :span="11">
            <el-form-item prop="date1">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col> 
        <el-col :span="11">
            <el-form-item prop="date2">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>   
            </el-form-item>
        </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="form.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">当即建立</el-button>
        <el-button type="primary" @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>
复制代码

这里须要特地说明的是为活动时间这个表单项设置prop属性。

<el-form-item label="活动时间" >
    <el-col :span="11">
        <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col> 
    <el-col :span="11">
        <el-form-item prop="date2">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-form-item>
    </el-col>
</el-form-item>
复制代码

那对比以前没有设置prop的代码，还给el-date-picker外层多加了一个el-form-item元素。那也很好理解，由于活动时间这个包含了两个el-time-picker，而且绑定的不一样的form数据：date1和date2。而以前的写法两个el-time-picker都同在一个el-form-item元素中，那设置prop时只能设置一个值，因此element提供的解决方案就是分别给两个el-time-picker在嵌套一层el-form-item元素，这样就能分别设置prop属性了。

如今咱们在看一下重置按钮的效果。

能够看到全部的表单项都重置成功。

表单项属性

表单项属性是指设置在el-form-item上的属性
这里在声明一下一些叫法，以避免产生疑惑
当描述表单时，对应的元素为el-form
当描述表单项对应的元素为el-form-item

prop

这个属性在前面实践表单验证、表单重置的时候用过。

那在平常开发中，表单验证和表单重置是一个很经常使用的功能，所以颇有必要在编写代码的时候给表单项设置prop属性，以避免出现一些让人疑惑的错误。

必定要注意prop属性值的设置必定要和form表单绑定的字段名称一致

label

label属性设置的是表单标签域的文本描述。

size

表单组件的尺寸，共有三个可选值：medium / small / mini。

rules

这里的rules是表单项的验证规则，下面咱们就活动名称这个字段进行验证。

主要改动为将表单属性el-form上的rules移除，在活动名称对应的el-form-item上添加rules规则验证。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element Form表单实践</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
</head>
<body>
    <div id="box">
        <span> {{message}} </span>
        <el-divider></el-divider>
        <!-- 典型表单 -->
        <el-form ref="form" :model="form" label-width="120px" label-suffix=":" :status-icon="statusIcon">
            <el-form-item label="活动名称" prop="name" :rules="[{required: true,trigger: 'blur',message: '请输入活动名称'}]">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="form.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="活动时间" >
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col> 
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>   
                    </el-form-item>
                </el-col>
            </el-form-item>
            
            <el-form-item label="即时配送" prop="delivery">
                <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="form.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="form.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">当即建立</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script> var vm = new Vue({ el: '#box', data: { message: "Element Form表单实践", statusIcon: true, form: { name: '我是初始化设置的活动名称', // 活动名称 region: 'beijing', // 活动区域 date1: new Date(), // 活动时间-日期 date2: new Date(), // 活动时间-时间 delivery: true, // 即时配送 type: ['单纯品牌曝光'], // 活动性质 resource: '线上品牌商赞助', // 特殊资源 desc: '我是初始化设置的活动形式' // 活动形式 }, addFormRules: { name: [{ required: true, // name字段是否必填,true:必填 false:非必填 trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则 message: "请输入活动名称", // 若是没有填写时的错误提示语 },{ min: 5, // 字段最小长度 max: 10, // 字段最大长度 trigger: 'blur', // 在何时触发验证,blur:在元素失去焦点的时候验证规则 message: "活动名称长度在5-10个字符", // 不知足规则时显示的错误提示语 }] } }, methods: { onSubmit() { this.$refs['form'].validate((validate,failedInfo) => { if(validate){ // 将表单数据发送到后端 // 发送 POST 请求 axios.post(url, this.form).then(function (response) { // 处理后端返回的响应数据 }); }else{ // 提示用户 this.$message({ message: '表单数据格式有误,请检查后从新提交.', type: "error", center: true }); } }) }, resetForm(){ this.$refs['form'].resetFields(); } } }) </script>
</body>
</html>
复制代码

主要的代码以下：

<el-form-item label="活动名称" prop="name" :rules="[{required: true,trigger: 'blur',message: '请输入活动名称'}]">
    <el-input v-model="form.name" ></el-input>
</el-form-item>
复制代码

能够看到验证规则添加到表单项el-form-item上和添加到表单el-form上的语法基本上是一致的。

接着看下验证的结果。

能够看到验证规则已经生效了。

最后呢，还有一个操做想进行验证一下，就是同时设置el-form和el-form-item上的rules。

<el-form ref="form" :model="form" label-width="120px" label-suffix=":" :status-icon="statusIcon" :rules="addFormRules">
    <el-form-item label="活动名称" prop="name" :rules="[{required: true,trigger: 'blur',message: '请输入活动名称'}]">
        <el-input v-model="form.name" ></el-input>
    </el-form-item>
</el-form>
复制代码

能够看到我将el-form上的rules又添加了回来。

el-form对活动名称字段的验证规则是不能为空且长度在5-10个字符，而el-item-form上设置的规则只有内容不能为空。

咱们再来看一下结果。

能够发现只有不为空的验证规则生效了,而长度验证规则并无生效。因此结论就是el-form上的rules优先级小于el-item-form上的rules规则验证，当el-form-item上有定义字段的验证规则时，就会忽略对应的el-form上定义的字段的验证规则。

结束语

到这里本篇文章就结束了，内容很是的简单。

下一篇将会分享项目开发中的一个表单实践，记录在这个过程当中遇到的一些问题。

关于

做者

小土豆biubiubiu

一个努力学习的前端小菜鸟，知识是无限的。坚信只要不停下学习的脚步，总能到达本身指望的地方

同时仍是一个喜欢小猫咪的人，家里有一只美短小母猫，名叫土豆

博客园

www.cnblogs.com/HouJiao/

掘金

juejin.im/user/58c61b…

微信公众号

土豆妈的碎碎念

微信公众号的初衷是记录本身和身边的一些故事，同时会不按期更新一些技术文章

欢迎你们扫码关注，一块儿吸猫，一块儿听故事，一块儿学习前端技术

做者寄语

小小总结，欢迎你们指导~