微网站 app 区别,wordpress侧边栏上拉后固定,如何建立官方网站,网站二次开发教程Form 表单 由输入框、选择器、单选框、多选框等控件组成#xff0c;用以收集、校验、提交数据#xff0c;组件升级采用了 flex 布局#xff0c;以替代旧版本的 float 布局。 在 Element Plus 中#xff0c;el-form 是一个表单组件#xff0c;用于创建表单以便用户填写和提…Form 表单 由输入框、选择器、单选框、多选框等控件组成用以收集、校验、提交数据组件升级采用了 flex 布局以替代旧版本的 float 布局。 在 Element Plus 中el-form 是一个表单组件用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法使表单验证更加容易。
使用 el-form 组件您可以将表单控件组织在一起并对表单进行验证以确保提交的数据符合预期的格式和要求。该组件具有以下特性
支持内置的验证规则和自定义验证函数。可以通过设置 model 属性将表单数据绑定到表单组件上。支持表单验证前和验证后的回调函数。提供了一些常见的表单控件如输入框、下拉框、单选框、复选框等。
在功能和用法上el-form 组件在 Element Plus 和 ElementUI 中是相似的但是在一些细节上有一些变化。
以下是 Element Plus 和 ElementUI 中 el-form 组件的一些主要变化
引入方式ElementUI 使用 Vue.use(ElementUI) 的方式引入组件而 Element Plus 使用 import 导入组件。例如在 Vue 3 中使用 Element Plus我们需要这样导入 el-form 组件import { ElForm } from element-plus 样式Element Plus 使用新的默认主题和样式不同于 ElementUI 的默认主题和样式。您可以使用 Element Plus 提供的主题样式或自定义主题样式。 表单验证在 Element Plus 中表单验证通过 this.$refs.form.validate() 方法执行。而在 ElementUI 中表单验证通过 this.$refs.form.validate((valid) {}) 方法执行。这是因为在 Element Plus 中表单验证的回调函数是一个可选参数。 表单控件Element Plus 中添加了一些新的表单控件如 TimePicker、DatePicker、TreeSelect 等。而在 ElementUI 中这些表单控件是在 el-date-picker、el-time-picker、el-cascader 等组件中提供的。 翻译Element Plus 支持更多的语言翻译并且可以通过自定义翻译对象来支持更多的语言。而在 ElementUI 中只有默认的语言翻译和几个语言包可用。
总之Element Plus 是 ElementUI 的升级版提供了更多的表单控件和功能同时还改进了一些细节和样式。虽然两者之间有一些变化但是如果您已经熟悉了 ElementUI 的 el-form 组件那么您将会很快地适应 Element Plus 的使用。 常用属性 el-form 是 Element Plus 中的表单组件以下是 el-form 常用的属性和方法
model用于绑定表单数据对象可以使用 v-model 绑定到表单元素。例如el-input v-modelformData.username/el-input。rules用于设置表单验证规则。规则是一个数组其中每个对象表示一个验证规则。例如rules: { username: [ { required: true, message: 请输入用户名, trigger: blur } ] }。label-width用于设置表单元素的标签宽度。label-position用于设置表单元素标签的位置可选值有 right、left、top、bottom。inline用于设置是否为行内表单。disabled用于设置是否禁用表单。 常用方法 validate用于触发表单验证如果验证成功执行回调函数并传递 true否则传递 false。例如formRef.value.validate((valid) { if (valid) { // 表单验证成功 } else { // 表单验证失败 } })。resetFields用于重置表单数据和验证状态。clearValidate用于清除表单验证状态。validateField用于触发指定表单元素的验证。例如formRef.value.validateField(username, (errorMessage) { if (errorMessage) { // 验证失败 } else { // 验证成功 } })。submit用于提交表单数据需要指定一个回调函数该函数在提交成功或失败时被调用。例如formRef.value.submit((formData) { // 表单提交成功 }, (error) { // 表单提交失败 })。
这些是 el-form 常用的属性和方法当然还有其他属性和方法可以在需要时使用。在 Element Plus 的官方文档中您可以找到更详细的文档和示例。 下面是一个简单的 el-form 示例
templateel-form :modelform :rulesrules refform label-width100pxel-form-item label用户名 propusernameel-input v-modelform.username/el-input/el-form-itemel-form-item label密码 proppasswordel-input typepassword v-modelform.password/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(form)提交/el-button/el-form-item/el-form
/templatescriptexport default {data() {return {form: {username: ,password: },rules: {username: [{ required: true, message: 请输入用户名, trigger: blur }],password: [{ required: true, message: 请输入密码, trigger: blur },{ min: 6, max: 12, message: 密码长度在 6 到 12 个字符, trigger: blur }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {alert(提交成功!);} else {console.log(验证失败);return false;}});}}}
/script
在这个例子中el-form的:model属性绑定了表单数据form:rules属性绑定了表单验证规则rules。每个需要验证的el-form-item组件都有一个prop属性它对应rules中的一个验证规则。
当用户点击提交按钮时submitForm方法会被触发该方法使用this.$refs[formName].validate来触发表单的验证。如果验证通过则可以执行提交操作如果验证失败则不会执行提交操作并在控制台输出验证失败信息。 典型表单 包括各种表单项比如输入框、选择器、开关、单选框、多选框等。 在 Form 组件中每一个表单域由一个 Form-Item 组件构成表单域中可以放置各种类型的表单控件包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
templateel-form refform :modelform label-width80pxel-form-item label活动名称el-input v-modelform.name/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-pickertypedateplaceholder选择日期v-modelform.date1stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-pickerplaceholder选择时间v-modelform.date2xxstylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-item label即时配送el-switch v-modelform.delivery/el-switch/el-form-itemel-form-item label活动性质el-checkbox-group v-modelform.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelform.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式el-input typetextarea v-modelform.desc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-form
/templatescriptexport default {data() {return {form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,},}},methods: {onSubmit() {console.log(submit!)},},}
/script 表单验证 在防止用户犯错的前提下尽可能让用户更早地发现并纠正错误。trigger:触发方式改变再触发 change得到焦点再失去焦点触发 blur。 Form 组件提供了表单验证的功能只需要通过 rules 属性传入约定的验证规则并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
templateel-form:modelruleForm:rulesrulesrefruleFormlabel-width100pxclassdemo-ruleForm
el-form-item label活动名称 propnameel-input v-modelruleForm.name/el-input/el-form-itemel-form-item label活动区域 propregionel-select v-modelruleForm.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间 requiredel-col :span11el-form-item propdate1el-date-pickertypedateplaceholder选择日期v-modelruleForm.date1stylewidth: 100%;/el-date-picker/el-form-item/el-colel-col classline :span2-/el-colel-col :span11el-form-item propdate2el-time-pickerplaceholder选择时间v-modelruleForm.date2stylewidth: 100%;/el-time-picker/el-form-item/el-col/el-form-itemel-form-item label即时配送 propdeliveryel-switch v-modelruleForm.delivery/el-switch/el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelruleForm.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源 propresourceel-radio-group v-modelruleForm.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelruleForm.desc/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitForm(ruleForm)立即创建/el-buttonel-button clickresetForm(ruleForm)重置/el-button/el-form-item
/el-form
/templatescriptexport default {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()},},}
/script
表单数据的定义 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 },],},}},
