Element-UI框架的使用（三）-- Form 表单

Form 表单

Element-UI： Form表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

一、基本使用

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

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
  <!-- 在元素上采用v-model双向绑定 -->
    <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>
<script>
  export default {
    data() { // 表单中的数据项一般会用一个对象包起来（属性名一般应和后端接口中保持一致）
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

二、表单验证

表单内容一定要验证（不能相信用户的任何输入！）

步骤1-定义表单验证规则

在 data 中,补充定义规则。

格式：

data() {
  return {
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        // 数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

示例

  rules: {
        // 字段名：mobile就表示要验证的属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        // rules中的属性名与表单数据项中的属性名必须是一致的。
        mobile: [
           // trigger: 什么时候触发验证
          { required: true, message: '请输入手机号', trigger: 'blur' },
           // pattern : 正则
          { pattern: /^1[3-9]\d{9}$/, message: '请输入合法的手机号码', trigger: 'blur' }
        ],
         password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
        ]
      }

步骤2-模板中的配置

内容：

1. 给 el-form 组件绑定 model 为表单数据对象

2. 给 el-form 组件绑定 rules 属性配置验证规则

3. 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

验收效果

我们做到这一步时，当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

步骤3-手动兜底验证

格式：

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
	   // 验证失败
	}
})

说明：

• validate 方法是表单组件自带的，用来对表单内容进行检验。
• 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

<!-- 代码 模板 -->
<!-- 添加ref引用 -->
<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

onSubmit () {
  this.$refs.form.validate(valid => {
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if(valid) {
      // 通过了验证，你可以做后续动作了
      // 例如调用登录时需要向后端发送ajax的请求接口，提交表单数据
    }else {
	   // 验证失败
	}
  })

小结

步骤

1. 定义验证规则(按element-ui的要求来)

2. 配置模板，应用规则

   给表单设置 rules 属性传入验证规

   给表单设置model属性传入表单数据

   给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

3. 手动兜底验证

4. 下面三个地方的属性名必须一致

三、表单验证-自定义检验规则

rules:{
    属性名1: [
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
      	// rule：采用的规则
        // value: 被校验的值
        // callback 是回调函数 
        // 如果通过了规则检验，就直接调用callback()
        // 如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        // 例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }]
}

小结

• 自定义规则可以让校验逻辑更加灵活，它的格式是固定的
• callback必须调用

四、重置表单清理校验痕迹

校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。

// 清理校验痕迹 恢复表单默认数据
this.$refs.form组件的引用.resetFields()