021_Form表单

最新推荐文章于 2024-01-18 15:45:13 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-01-18 15:45:13 发布

阅读量1.1k

点赞数

分类专栏： element-ui 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/aihiao/article/details/123122271

版权

element-ui 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

1. Form表单

1.1. 属性

参数	说明	类型	可选值	默认值
model	表单数据对象	object	无	无
rules	表单验证规则	object	无	无
inline	行内表单模式	boolean	无	false
label-position	表单域标签的位置, 如果值为left或者right时, 则需要设置label-width	string	right/left/top	right
label-width	表单域标签的宽度, 例如'50px'。作为Form直接子元素的form-item会继承该值。支持auto。	string	无	无
label-suffix	表单域标签的后缀	string	无
hide-required-asterisk	是否隐藏必填字段的标签旁边的红色星号	boolean	无	false
show-message	是否显示校验错误信息	boolean	无	true
inline-message	是否以行内形式展示校验信息	boolean	无	false
status-icon	是否在输入框中显示校验结果反馈图标	boolean	无	false
validate-on-rule-change	是否在rules属性改变后立即触发一次验证	boolean	无	true
size	用于控制该表单内组件的尺寸	string	medium / small / mini	无
disabled	是否禁用该表单内的所有组件。若设置为true, 则表单内组件上的disabled属性不再生效	boolean	无	false

1.2. Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法, 参数为一个回调函数。该回调函数会在校验结束后被调用, 并传入两个参数: 是否校验成功和未通过校验的字段。若不传入回调函数, 则会返回一个promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array \| string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置, 将所有字段值重置为初始值并移除校验结果	无
clearValidate	移除表单项的校验结果。传入待移除的表单项的prop属性或者prop组成的数组, 如不传则移除整个表单的校验结果	Function(props: array \| string)

1.3. Form Events

事件名称	说明	回调参数
validate	任一表单项被校验后触发	被校验的表单项prop值, 校验是否通过, 错误消息(如果存在)

1.4. Form-Item Attributes

参数	说明	类型	可选值	默认值
prop	表单域model字段, 在使用validate、resetFields方法的情况下, 该属性是必填的	string	传入Form组件的model中的字段	无
label	标签文本	string	无	无
label-width	表单域标签的的宽度, 例如'50px'。支持auto。	string	无	无
required	是否必填, 如不设置, 则会根据校验规则自动生成	boolean	无	false
rules	表单验证规则	object	无	无
error	表单域验证错误信息, 设置该值会使表单验证状态变为error, 并显示该错误信息	string	无	无
show-message	是否显示校验错误信息	boolean	无	true
inline-message	以行内形式展示校验信息	boolean	无	false
size	用于控制该表单域下组件的尺寸	string	medium / small / mini	无

1.5. Form-Item Slot

name	说明
—	Form Item的内容
label	标签文本的内容

1.6. Form-Item Scoped Slot

name	说明
error	自定义表单校验信息的显示方式, 参数为 { error }

1.7. Form-Item Methods

方法名	说明
resetField	对该表单项进行重置, 将其值重置为初始值并移除校验结果
clearValidate	移除该表单项的校验结果

2. Form表单例子

2.1. 使用脚手架新建一个名为element-ui-form的前端项目, 同时安装Element插件。

2.2. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import NormalForm from '../components/NormalForm.vue'
import InlineForm from '../components/InlineForm.vue'
import LabelPosition from '../components/LabelPosition.vue'
import RuleForm from '../components/RuleForm.vue'
import MyRuleForm from '../components/MyRuleForm.vue'
import DynamicForm from '../components/DynamicForm.vue'
import SizeForm from '../components/SizeForm.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/NormalForm' },
  { path: '/NormalForm', component: NormalForm },
  { path: '/InlineForm', component: InlineForm },
  { path: '/LabelPosition', component: LabelPosition },
  { path: '/RuleForm', component: RuleForm },
  { path: '/MyRuleForm', component: MyRuleForm },
  { path: '/DynamicForm', component: DynamicForm },
  { path: '/SizeForm', component: SizeForm }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components在新建NormalForm.vue

<template>
  <div class="myform">
    <h1>典型表单</h1>
    <h4>在Form组件中, 每一个表单域由一个Form-Item组件构成, 表单域中可以放置各种类型的表单控件, 包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。</h4>
    <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"></el-date-picker></el-col>
        <el-col :span="2">-</el-col>
        <el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2"></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>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .myform {
    width: 720px;
  }
  .el-select {
    width: 100%;
  }
  .el-col-11 > .el-date-editor {
    width: 100%;
  }
  .el-col-2 {
    text-align: center;
  }
</style>

2.4. 在components在新建InlineForm.vue

<template>
  <div>
    <h1>行内表单</h1>
    <h4>设置inline属性可以让表单域变为行内的表单域。</h4>
    <el-form :inline="true" :model="formInline">
      <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>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

2.5. 在components在新建LabelPosition.vue

<template>
  <div style="width: 860px;">
    <h1>对齐方式</h1>
    <h4>通过设置label-position属性可以改变表单域标签的位置, 可选值为top、left, 当设为top时标签会置于表单域的顶部。</h4>
    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="名称"><el-input v-model="formLabelAlign.name"></el-input></el-form-item>
      <el-form-item label="活动区域"><el-input v-model="formLabelAlign.region"></el-input></el-form-item>
      <el-form-item label="活动形式"><el-input v-model="formLabelAlign.type"></el-input></el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      }
    }
  }
}
</script>

2.6. 在components在新建RuleForm.vue

<template>
  <div>
    <h1>表单验证</h1>
    <h4>Form组件提供了表单验证的功能, 只需要通过rules属性传入约定的验证规则, 并将Form-Item的prop属性设置为需校验的字段名即可。</h4>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name" style="width: 220px;"></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>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  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()
    }
  }
}
</script>

2.7. 在components在新建MyRuleForm.vue

<template>
  <div style="width: 520px;">
    <h1>自定义校验规则</h1>
    <h4>本例子中展示了如何使用自定义验证规则来完成密码的二次验证。</h4>
    <h4>本例还使用status-icon属性为输入框添加了表示校验结果的反馈图标。</h4>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item>
      <el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item>
      <el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm.age"></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>
  </div>
</template>

<script>
export default {
  data () {
    var checkAge = (rule, value, callback) => {
      if (value < 18) {
        callback(new Error('必须年满18岁'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字值' },
          { 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()
    }
  }
}
</script>

2.8. 在components在新建DynamicForm.vue

<template>
  <div>
    <h1>动态增减表单项</h1>
    <h4>除了在Form组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则。</h4>
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px">
      <el-form-item prop="email" label="邮箱" :rules="emailRule">
        <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="domainRule">
        <el-input v-model="domain.value"></el-input><el-button class="delete-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>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      emailRule: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ],
      domainRule: {
        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()
    },
    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()
      })
    }
  }
}
</script>

<style scoped>
  .el-input {
    width: 220px;
  }
  .delete-button {
    margin-left: 20px;
  }
</style>

2.9. 在components在新建SizeForm.vue

<template>
  <div>
    <h1>表单内组件尺寸控制</h1>
    <h4>通过设置Form上的size属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item也具有该属性。</h4>
    <el-form ref="form" :model="sizeForm" size="mini" label-width="80px" style="width: 420px;">
      <el-form-item label="活动名称"><el-input v-model="sizeForm.name"></el-input></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>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sizeForm: {
        name: '',
        resource: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}
</script>

2.10. 访问http://localhost:8080/#/NormalForm