Form-Form表单

灰太狼 2022-03-31 15:11 545阅读 1赞

**一、典型表单 **  
在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，  
包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

model:表单数据对象，object格式

label-width  表单域标签文本的宽度，作为 Form 直接子元素的 form-item 会继承该值

嵌套在 `el-form-item` 中的 `el-form-item` 标签宽度默认为零，不会继承 `el-form` 的 `label-width`。如果需要可以为其单独设置 `label-width` 属性。

label-position：控制标签对齐方式，如果值为 left 或者 right 时，则需要设置 `label-width，默认为right`

label  标签文本

<el-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 type="fixed-time" 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>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            form: {
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: ''
            }
          }
        },
        methods: {
          onSubmit() {
            console.log('submit!');
          }
        }
      })
    </script>

**二、行内表单 **

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。  
设置 inline 属性可以让表单域变为行内的表单域

![20190126112906144.png][]

<el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            formInline: {
              user: '',
              region: ''
            }
          }
        },
        methods: {
          onSubmit() {
            console.log('submit!');
          }
        }
      })
    </script>

**三、表单验证**

只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

我们在 rules 这里写了对表单的验证规则，但是我们如何在 methods 里进行指定的表单进行认证，所以我们一开始就在 el-form 里写了 ref=”ruleForm”，我们在 methods 里就可以用

this.$refs\['ruleForm'\].validate((valid) => \{\}

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.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="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.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 type="fixed-time" placeholder="选择时间" v-model="ruleForm.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="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="ruleForm.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="ruleForm.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="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <script>
      var Main = {
        data() {
          return {
            ruleForm: {
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: ''
            },
            rules: {
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ],
              date1: [
                { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
              ],
              date2: [
                { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
              ],
              type: [
                { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
              ],
              resource: [
                { required: true, message: '请选择活动资源', trigger: 'change' }
              ],
              desc: [
                { required: true, message: '请填写活动形式', trigger: 'blur' }
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
      var Ctor = Vue.extend(Main)
      new Ctor().$mount('#app')
    </script>

[https://github.com/yiminghe/async-validator][https_github.com_yiminghe_async-validator]

rules中的type：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70][]

**四、自定义校验规则 **

这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。  
本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。（出现对号或x）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1][]

<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm2.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
    <script>
      var Main = {
        data() {
          var checkAge = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('年龄不能为空'));
            }
            setTimeout(() => {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
              } else {
                if (value < 18) {
                  callback(new Error('必须年满18岁'));
                } else {
                  callback();
                }
              }
            }, 1000);
          };
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.ruleForm2.checkPass !== '') {
                this.$refs.ruleForm2.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.pass) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            ruleForm2: {
              pass: '',
              checkPass: '',
              age: ''
            },
            rules2: {
              pass: [
                { validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { validator: validatePass2, trigger: 'blur' }
              ],
              age: [
                { validator: checkAge, trigger: 'blur' }
              ]
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
      }
      var Ctor = Vue.extend(Main)
      new Ctor().$mount('#app')
    </script>

**五、单个的表单域上传递属性的验证规则&动态增减表单项 **

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]"
      >
        <el-input v-model="dynamicValidateForm.email"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :label="'域名' + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
        required: true, message: '域名不能为空', trigger: 'blur'
      }"
      >
        <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增域名</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <script>
      var Main = {
        data() {
          return {
            dynamicValidateForm: {
              domains: [{
                value: ''
              }],
              email: ''
            }
          };
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
            }
          },
          addDomain() {
            this.dynamicValidateForm.domains.push({
              value: '',
              key: Date.now()
            });
          }
        }
      }
      var Ctor = Vue.extend(Main)
      new Ctor().$mount('#app')
    </script>

**六、数字类型验证 **

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
      <el-form-item
        label="年龄"
        prop="age"
        :rules="[
        { required: true, message: '年龄不能为空'},
        { type: 'number', message: '年龄必须为数字值'}
      ]"
      >
        <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>

**七、 表单内组件尺寸控制**  
通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。  
如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的size属性，直接为这个表单项或表单组件设置自己的size即可。

<el-form :model="sizeForm" label-width="80px" size="mini">
      <el-form-item label="活动名称">
        <el-input v-model="sizeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="sizeForm.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="sizeForm.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker type="fixed-time" placeholder="选择时间" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="sizeForm.type">
          <el-checkbox-button label="美食/餐厅线上活动" name="type"></el-checkbox-button>
          <el-checkbox-button label="地推活动" name="type"></el-checkbox-button>
          <el-checkbox-button label="线下主题活动" name="type"></el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="sizeForm.resource" size="medium">
          <el-radio border label="线上品牌商赞助"></el-radio>
          <el-radio border label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

### Form Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>model</td> 
   <td>表单数据对象</td> 
   <td>object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>rules</td> 
   <td>表单验证规则</td> 
   <td>object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>inline</td> 
   <td>行内表单模式（为true时，表单元素由纵向排列变为横向排列）</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>label-position</td> 
   <td>表单域标签的位置，如果值为 left 或者 right 时，则需要设置&nbsp;<code>label-width</code></td> 
   <td>string</td> 
   <td>right/left/top</td> 
   <td>right</td> 
  </tr> 
  <tr> 
   <td>label-width</td> 
   <td> <p>表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值</p> <p>(其实就是label标签的宽度)</p> </td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>status-icon</td> 
   <td>是否在输入框中显示校验结果反馈图标</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>用于控制该表单内组件的尺寸</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

### Form Methods ###

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>validate</td> 
   <td>对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise</td> 
   <td>Function(callback: Function(boolean, object))</td> 
  </tr> 
  <tr> 
   <td>validateField</td> 
   <td>对部分表单字段进行校验的方法</td> 
   <td>Function(props: array</td> 
  </tr> 
  <tr> 
   <td>resetFields</td> 
   <td>对整个表单进行重置，将所有字段值重置为初始值并移除校验结果</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

### Form-Item Attributes ###

<table> 
 <thead> 
  <tr> 
   <th style="width:98px;">参数</th> 
   <th style="width:437px;">说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:98px;">prop</td> 
   <td style="width:437px;">表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的</td> 
   <td>string</td> 
   <td>传入 Form 组件的&nbsp;<code>model</code>&nbsp;中的字段</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:98px;">label</td> 
   <td style="width:437px;">标签文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>label-width</td> 
   <td>表单域标签的的宽度，例如 '50px'</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:98px;">required</td> 
   <td style="width:437px;">是否必填，如不设置，则会根据校验规则自动生成</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td style="width:98px;">rules</td> 
   <td style="width:437px;">表单验证规则</td> 
   <td>object</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td style="width:98px;">size</td> 
   <td style="width:437px;">用于控制该表单域下组件的尺寸</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

[20190126112906144.png]: /images/20220331/5f45d8bd6e254b8faf09a02ed5eea792.png
[https_github.com_yiminghe_async-validator]: https://github.com/yiminghe/async-validator
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70]: /images/20220331/b45bb0671cc749eabca34b194a7bf8f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNmZHh6aHEwMQ_size_16_color_FFFFFF_t_70 1]: /images/20220331/311bc483bf2145afae6eb27ea320e1a8.png