form表单API文档

最新推荐文章于 2024-06-11 09:46:09 发布
最新推荐文章于 2024-06-11 09:46:09 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40291247/article/details/107370446
版权

wb-form参数：

参数说明类型可选默认必填
data绑定的表单数据objest--是
rules校验对象（全局校验定义为空对象）objest--否
field-list渲染表单数据Array--是
list-type-info可放置options(如：celect /rodio/picker等)objest--否
type-pattern是否启用浮动模式（浮动模式下带有重置功能）booleantrue/falsefalse否
isShowBtn是否显示按钮（不显示则自定义按钮）booleantrue/falsefalse否
className给form起的名称String--否
label-width表单字段的宽度（带‘px’）String-100px否

温馨提示：（可定义在一个变量里（formInfo），便于阅读和维护）

  • event事件
参数说明参数
blurEvent失去焦点事件val
formRef将form实例返回到父级（如：上传图片可能会用到等ref实例

注意（可自定义事件，添加多个事件，前提得封装在组件中。可看封装说明！）

field-list参数：

参数说明类型可选默认必填
label字段名String--是
value绑定值（注意：prop必填值也会使用）String--是
type渲染类型Stringinput/select等（查看：type参数说明）-是
disabled是否禁止booleantrue/faslefasle否
filterable是否可筛选(搜索)booleantrue/faslefasle否
clearable是否可清除booleantrue/faslefasle否
Noshow是否不显示booleantrue/faslefasle否
required是否必填booleantrue/faslefasle否
validator自定义验证fn(参数：rule, value, callback)--否
pattern自定义正则正则--否
message自定义正则不满足回调消息（仅限有正则使用）String--否
style控制样式（如:width:50%）String--否
dateType日期类型Stringdate/week/month/year/daterange-是
rangeSeparator仅限日期和时间使用 范围使用（ 链接符号）String-“-”否
format仅限日期使用（日期格式，不懂的看element-API）String--否
value-format仅限日期使用 （输出日期格式）String--否
event绑定事件名（用来定位触发本身是谁 /用到时必填）String--否
showPassword仅限密码使用 （是否显示查看密码功能）booleantrue/faslefasle否
className给form-item起的名称String--否
autosize仅限文本域使用 （置宽高大小，{ minRows: 2, maxRows: 4}）objest--否
maxlength仅限文本域使用 （最大输入长度 ）String--否
step仅限计数器使用 （计数器步长 ）number--否
list放置list-type-info的名称String--否
color仅限开关使用 （自定义颜色）String--否
isRange仅限时间使用 （是否为时间范围选择）booleantrue/faslefasle否
tag仅限日期使用 （自定义时间，带快捷选项等）objest--否
btnName仅限标签使用 （btn名称）String--否
PickerOptionsList仅限日期使用 （自定义时间，带快捷选项等）objest--否
PickerOptionsList仅限日期使用 （自定义时间，带快捷选项等）objest--否
PickerOptionsList仅限日期使用 （自定义时间，带快捷选项等）objest--否
  • type参数说明：
参数说明
input输入框
select选择器
password密码输入框
textarea文本域
data日期
cascader联级选择器
slot自定义（如：上传图片等）
inputNumber计数器
radio单选框
checked多选框 （注意：使用多选框data绑定值：必须为数组 ）
switch开关
time时间
tag标签（注意：使用标签data绑定值：必须为数组 ）

rules校验：

  • 采用全局校验, 所以只需要关注以下代码！（全局验证请查看《form表单的全局验证》）
  methods: {
  	// 初始化校验
  	initRules () {
   		const formInfo = this.formInfo
        formInfo.rules = this.$initRules(formInfo.fieldList)
   	},
  },
  created() {
  	// 调用初始化校验
   	this.initRules()
  },

可能会遇到的问题：

  • 单选框，选择A，AA字段消失，选择B, AA,BB字段消失或显示
  • 通过监听来实现
watch: {
      // 通过监听来实现（单选框，选择A，AA字段消失，选择B, AA,BB字段消失，）
      'formInfo.data.difficulty' (val) {
        console.log(val)
        const fieldList = this.formInfo.fieldList
        if(val === "1"){
          fieldList.forEach(item => {
            if (['data', 'week'].includes(item.value)) {
              item.Noshow = true
            } else {
              item.Noshow = false
            }
          })
        }else if(val === "2"){
          fieldList.forEach(item => {
            if (['month', 'year'].includes(item.value)) {
              item.Noshow = true
            } else {
              item.Noshow = false
            }
          })
        }else if(val === "3"){
          fieldList.forEach(item => {
            if (['daterange', 'time'].includes(item.value)) {
              item.Noshow = true
            } else {
              item.Noshow = false
            }
          })
        }
      }
    },

使用组件案例：

<template>
  <div>
    <wb-form
      :data="formInfo.data"
      :rules="formInfo.rules"
      :label-width="formInfo.labelWidth"
      :field-list="formInfo.fieldList"
      :list-type-info="formInfo.listTypeInfo"
      :type="formInfo.type"
      @changeEvent="changeEventFn"
      @blurEvent="blurEventFn"
      @formRef="updaterefObjFn"
      @success="successFn"
    >
      <!-- 自定义插槽-选择头像 -->
      <template v-slot:form-headerImg>
        <div class="slot-headerImg">
          <img
            :src="formInfo.data.headerImg"
            style="height: 30px;"
          >
          <el-button
            type="primary"
            icon="el-icon-picture"
            size="mini"
            @click="ClickImgFn"
          >
            更换头像
          </el-button>
        </div>
      </template>
    </wb-form>
  </div>
</template>

<script>
  export default {
    name: 'wb-ceshiForm',
    data () {
      return {
        refForm: '',
        formInfo: {
          data:{
            headerImg: '',
            user:'',
            password: '',
            newpassword: '',
            num:1,
            TaskType:'',
            difficulty:'1',
            color: [],
            moneyType: '',
            data:'',
            week: '',
            month: '',
            year: '',
            daterange: '',
            time: '',
            tag:[],
            phone: ''
          },
          rules: {},
          fieldList: [
            { label: '上传头像', value: 'headerImg', type: 'slot', required: true, },
            { label: '账号', value: 'user', type: 'input', required: true , event: 'user', pattern:/^[\u4e00-\u9fa5]+$/,message:'账号必须为汉字'},
            { label: '手机号', value: 'phone', type: 'input', event: 'phone', pattern:/^1[3-9]\d{9}$/},
            // // validator: checkAccount
            { label: '密码', value: 'password', type: 'password', required: true, event: 'password',showPassword: true},
            { label: '新密码', value: 'newpassword', type: 'password', required: true, event: 'password'},
            // validator: checkPwd
            { label: '描述', value: 'desc', type: 'textarea',maxlength: '100'},
            { label: '计数器', value: 'num', type: 'inputNumber',required: true},
            { label: '任务类型', value: 'TaskType', type: 'select',list: 'options',filterable:true, event: 'TaskType',required: true},
            { label: '城市', value: 'city', type: 'cascader',list: 'cityOptions'},
            { label: '难度', value: 'difficulty', type: 'radio',list: 'rodioOptions',event:'difficulty',required: true},
            { label: '喜欢颜色', value: 'color', type: 'checked',list: 'colorOptions',required: true},
            { label: '按年付费', value: 'moneyType', type: 'switch'},
            { label: '日期', value: 'data', type: 'date', dateType: 'date',format:'yyyy-MM-dd',Noshow: true},
            { label: '周期', value: 'week', type: 'date', dateType: 'week',format:'yyyy 第 WW 周',Noshow: true},
            { label: '月份', value: 'month', type: 'date', dateType: 'month'},
            { label: '年份', value: 'year', type: 'date', dateType: 'year'},
            { label: '日期范围', value: 'daterange', type: 'date', dateType: 'daterange',list: 'pickerOptions'},
              { label: '上班时间', value: 'time', type: 'time',isRange: true},
            { label: '标签', value: 'tag', type: 'tag',btnName: '添加标签',required: true},
          ],
          listTypeInfo:{
            options: [
              {
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }
            ],
            cityOptions: [
              {
                value: 'zhinan',
                label: '指南',
                children: [{
                  value: 'shejiyuanze',
                  label: '设计原则',
                  children: [{
                    value: 'yizhi',
                    label: '一致'
                  }, {
                    value: 'fankui',
                    label: '反馈'
                  }, {
                    value: 'xiaolv',
                    label: '效率'
                  }, {
                    value: 'kekong',
                    label: '可控'
                  }]
                }, {
                  value: 'daohang',
                  label: '导航',
                  children: [{
                    value: 'cexiangdaohang',
                    label: '侧向导航'
                  }, {
                    value: 'dingbudaohang',
                    label: '顶部导航'
                  }]
                }]
              },
            ],
            rodioOptions: [
              {label: '简单', value: '1'},
              {label: '困难', value: '2'},
              {label: '超级困难', value: '3'},
            ],
            colorOptions: [
              {label: '红色', value: 'red'},
              {label: '黄色', value: 'yellow'},
              {label: '蓝色', value: 'blue'},
              {label: '绿色', value: 'greend'},
            ],
            pickerOptions: {
              shortcuts: [{
                text: '本月',
                onClick(picker) {
                  picker.$emit('pick', [new Date(), new Date()]);
                }
              }, {
                text: '今年至今',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date(new Date().getFullYear(), 0);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近六个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setMonth(start.getMonth() - 6);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
          }
        },

      }
    },
    watch: {
      // 通过监听来实现（单选框，选择A，AA字段消失，选择B, AA,BB字段消失，）
      'formInfo.data.difficulty' (val) {
        console.log(val)
        const fieldList = this.formInfo.fieldList
        if(val === "1"){
          fieldList.forEach(item => {
            if (['data', 'week'].includes(item.value)) {
              item.Noshow = true
            } else {
              item.Noshow = false
            }
          })
          console.log(fieldList)
        }else if(val === "2"){
          fieldList.forEach(item => {
            if (['month', 'year'].includes(item.value)) {
              item.Noshow = true
            } else {
              item.Noshow = false
            }
          })
        }else if(val === "3"){
          fieldList.forEach(item => {
            if (['daterange', 'time'].includes(item.value)) {
              item.Noshow = true
            } else {
              item.Noshow = false
            }
          })
        }
      }
    },
      methods: {
      blurEventFn(val) {
        console.log(val)
        // switch 语句用于基于不同条件执行不同动作。
        switch(val) {
          case 'TaskType':
            // 代码块
            break;
          case 'difficulty':
            // 代码块
            break;
          default:
            //默认代码块
        }
      },
      changeEventFn (res) {
        console.log(res)
      },
      updaterefObjFn (el) {
        console.log(el)
        this.refForm = el
      },
      // 初始化验证
      initRules () {
        const formInfo = this.formInfo
        formInfo.rules = this.$initRules(formInfo.fieldList)
      },
      // 上传图片
      ClickImgFn () {
        this.formInfo.data.headerImg = require('../../assets/logo.png')
        this.refForm.validateField('headerImg')
      },
      // 成功返回函数
      successFn () {
        console.log(this.formInfo.data)
      }
    },
    created() {
      this.initRules()
    },
  }
</script>

<style scoped>

</style>
jquery.form中文API
12-07
jquery[1].form.js中文API，原版英文翻译而来
HTML5：Form API
抛弃幻想，准备斗争
10-21 485
HTML5中的各种增强表单组件的使用（基本不用） HTML5中的验证操作的使用 对于表单，在HTML4.0的时候实际上只规定了几种类型：text、password,radio,checkbox,select, textarea,hidden,submit,button,reset,file. 范例：观察滑动输入组件 form_a.html <!DOCTYPE html> <...
API中form相关
weixin_30530339的博客
11-11 138
2008-02-14 17:05 Ext.form.BasicForm 对应一个dom中的form,默认是用ajax提交的,如果的确想回传,可以使用如下方式 var myForm. = new Ext.form.BasicForm("form-el-id", { onSub...
Form类说明文档
lori的专栏
04-14 2312
Form是包含任意Item组合的Screen：image、只读的text field、可编辑的text field、可编辑的data field、gauge、choice group和custom item。通常来说，一个form可以包任意一个item的子类。系统负责处理布局、横向和纵向的滚动。Form的所有组件在滚动时作为一个整体。 Item管理 可以向一个Form里添加、删除和
第7 章 FormsAPI
bsr1983的专栏
03-12 166
  7.1 HTML5 Forms概述 7.1.1 HTML Forms与XForms        XForms是一个以XML为核心、功能强大却略显复杂的标准，它用于规范客户端表单的行为，而专门的W3C工作组研究这些行为已近十年。XForms充分利用了XML Schema，制定了针对验证和格式化的精确准则，不过，很遗憾，在没有安装插件的情况下，主流浏览器均不支持XForms。 7.1.2...
jQuery EasyUI API 中文文档 – Form表单
12-03
在这些组件中，Form 表单是一个重要的部分，它允许开发者创建具有 AJAX 功能的表单，使得用户交互更加流畅，数据提交更加便捷。 **表单基本用法** 在 HTML 中，你可以创建一个普通的表单，如： ```html <form id=...
jQuery EasyUI API 中文文档 - Form表单
10-28
下面，我们将详细解读jQuery EasyUI API中文文档中关于Form表单的知识点。 首先，了解如何将一个普通的HTML表单转化为一个支持Ajax提交的表单。这可以通过为表单元素绑定jQuery EasyUI的Form插件来实现。例如，首先...
vue获取form表单的值示例
10-16
本文档中将分享一个如何在Vue.js中获取form表单值的示例，使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细介绍这些知识点。 ### Vue.js中的表单数据绑定 Vue.js提供了一种简单的方式来实现数据的...
Spring Cloud使用Feign实现Form表单提交的示例
08-27
在本文中，我们将深入探讨如何使用Feign实现在微服务架构中进行Form表单提交。这种功能通常在需要与传统Web应用（如Struts系统）进行集成时显得尤为重要。 首先，为了实现Form表单提交，我们需要引入两个依赖：`...
推荐开源项目：FormAPI - 简化的MCPE表单API
最新发布
gitblog_00010的博客
06-11 270
推荐开源项目：FormAPI - 简化的MCPE表单API 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 FormAPI是一个专为PocketMine-MP（Minecraft Pocket Edition服务器端）设计的轻量级插件库，它使得创建和管理用于客户端交互的表单变得前所未有的简单。无论你是经验丰富的开发者还是初学者，FormAPI都能帮助你快速构建功能丰富且...
怎样使用antd Form 的API
zb0002011的博客
04-24 2707
两种用法 1、Form.create() 经 Form.create() 包装过的组件会自带 this.props.form 属性 1.2、class函数使用Form.create(): class CustomizedForm extends React.Component { ...代码 } CustomizedForm = Form.create({})(Customized...
Post form表单形式调用接口
JethroShen的博客
03-03 3621
Map的value如果是对象需要转换成json对象存储 /** * * @param httpUrl 请求的url * @param param form表单的参数（key,value形式） * @return */ public static String doPostForm(String httpUrl, Map param,String token) { HttpURLCon...
（一）vForm 动态表单设计器之使用
刘一线的博客
05-18 5062
VForm是一款基于Vue 2/Vue 3的低代码表单，支持Element UI、iView两种UI库，定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能
form表单注册账号
kuaixiangzi的专栏
03-24 2022
案例用form表单注册账号 1.用div将表单包起来，设置div宽高，border样式，效果看起来更好 2.form表单用一个fun()函数返回一个false值阻止提交模式，在表单中加入基本标签，用户名，密码，邮箱，submit提交按钮， 3.用正则表达式验证鼠标移开时，用户名，密码，邮箱是否可用 4.当用户名，密码，邮箱验证都可用时，返回一个true值，form表
使用vue的一些个小案例
oracle8090的博客
08-24 760
1.动态修改表格中的某个码值 <el-table-columnalign="center"prop="applicationState"label="任务状态"class="table-width"> <templateslot-scope="scope"> <spanv-if="scope.row.applicationState==0">启动成功</span> &l...
Forms API
qgmobile_conghua的专栏
07-17 740
HTML5 Forms核心概念：规范的核心是功能性动作和语义，而非外观和显示效果。 （一）HTML5表单包含了大量新的API和元素类型，分为两类： 1、新的输入型控件：     tel                电话号码                                email           电子邮箱地址文本框     url                网页
element 表单验证值为undefined的原因及解决方案
qing_xing_的博客
09-17 7625
闲话少说，步入正题。 表单验证的时候，值为undefined的原因，网上说的有三种 1、prop名称和rules中的名称一致 2、没有指定的model 3、绑定的属性没有在data中声明（这个可有可无） 除了这三种外，还有一种情况，在验证之前 我们都能拿到表单的值，但是验证之后打印的值为undefined。 我这里具体问题出现的场景：子组件是抽屉，需要里面的值回显到父组件上，但是点击提交的时候值为undefined resetFields（）会将数据恢复初始值，这时候传过去的数据也会.
Feign-form 3.8.0 双语API文档使用指南
资源摘要信息:"feign-form-3.8.0-API文档-中英对照版.zip"是一个包含了feign-form库3.8.0版本API文档的压缩包。该资源由多个部分组成，旨在为用户提供一个完整的技术参考与学习资源。 1.赠送jar包：feign-form-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值