VUE做出带有数据收集、校验和提交功能表单

这次给大家带来VUE做出带有数据收集、校验和提交功能表单,VUE做出带有数据收集、校验和提交功能表单的注意事项有哪些,下面就是实战案例,一起来看一下。

示例

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

安装

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

引入

<!-- import Vue -->
<script src=node_modules/vue/dist/vue.min.js></script>
<!-- import iview -->
<link rel=stylesheet href=node_modules/iview/dist/styles/iview.css rel=external nofollow >
<script src=node_modules/iview/dist/iview.min.js></script>
<!-- 省市区三级联动json数据 -->
<script src=/district/province_city_area.js></script>
<!-- 模拟数据 -->
<script src=mock.js></script>
<!-- import formCreate -->
<script src=dist/form-create.min.js></script>

注意! iview版本请>=2.9.2,否则可能存在问题

使用

let rules = window.mock;
new Vue({
 mounted:function(){
 let $f = this.$formCreate(mock,
   {
    onSubmit:function (formData) {
     console.log(formData);
     $f.submitStatus({loading:true});
   }
  });
  //动态添加表单元素
  $f.append($r,'goods_name');
 }
})

$formCreate 参数

  • rules 表单生成规则 [inputRule,selectRule,...]

  • options 初始化配置参数 (详细见底部 createOptions)

  • $f 实例方法

  • formData() 获取表单的value

  • getValue(field) 获取指定字段的value

  • changeField(field,value) 修改指定字段的value

  • resetFields() 重置表单

  • destroy() 销毁表单

  • removeField(field) 删除指定字段

  • fields() 获得表单所有字段名称

  • submit() 表单验证通过后提交表单,触发onSubmit事件

  • validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

  • validateField(field,callback) 表单验证指定字段

 $f.validateField(field,(errMsg)=>{
  if(errMsg){
   //TODO 验证未通过
  }else{
   //TODO 验证通过
  }
 });
  • prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个

$f.prepend({
  type:input,
  title:商品简介,
  field:goods_info,
  value:,
  props: {
   type: text,
   placeholder: 请输入商品简介,
  },
  validate:[
   { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
 });

append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个

$f.append({
  type:input,
  title:商品简介,
  field:goods_info,
  value:,
  props: {
   type: text,
   placeholder: 请输入商品简介,
  },
  validate:[
   { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
 });
  • submitStatus(props) 修改表单提交按钮状态

$f.submitStatus({
  //按钮类型,可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
  type:primary,
  //按钮大小,可选值为large、small、default或者不设置
  size:large,
  //按钮形状,可选值为circle或者不设置
  shape:undefined,
  //开启后,按钮的长度为 100%
  long:true,
  //设置button原生的type,可选值为button、submit、reset
  htmlType:button,
  //设置按钮为禁用状态
  disabled:false,
  //设置按钮的图标类型
  icon:ios-upload,
  //按钮文字提示
  innerText:提交,
  //设置按钮为加载中状态
  loading:false
 })
  • btn.loading() 让表单提交按钮进入loading状态

  • btn.finish() 让表单提交按钮恢复正常状态

rules 表单元素规则

hidden 隐藏字段

hiddenRule:
{
 type:hidden,//必填!
 //字段名称
 field:id, //必填!
 //input值
 value:14 //必填!
}

input 输入框

inputRule :
{
  type:input,//必填! 
  //label名称
  title:商品名称,//必填!
  //字段名称
  field:goods_name,//必填!
  //input值
  value:iphone 7,
  props: {
   //输入框类型,可选值为 text、password、textarea、url、email、date
   type: text, //必填!
   //是否显示清空按钮
   clearable:false, 
   //设置输入框为禁用状态
   disabled: false, 
   //设置输入框为只读
   readonly: false,
   //文本域默认行数,仅在 textarea 类型下有效
   rows: 4, 
   //自适应内容高度,仅在 textarea 类型下有效,可传入对象,如 { minRows: 2, maxRows: 6 }
   autosize: false, 
   //将用户的输入转换为 Number 类型
   number: false, 
   //自动获取焦点
   autofocus: false, 
   //原生的自动完成功能,可选值为 off 和 on
   autocomplete: off, 
   //占位文本
   placeholder: 请输入商品名称, 
   //输入框尺寸,可选值为large、small、default或者不设置
   size: default,
   //原生的 spellcheck 属性
   spellcheck: false,
  },
  event:{
   //按下回车键时触发
   enter:(event)=>{},
   //设置 icon 属性后,点击图标时触发
   click:(event)=>{},
   //数据改变时触发
   change:(event)=>{},
   //输入框聚焦时触发
   focus:(event)=>{},
   //输入框失去焦点时触发
   blur:(event)=>{},
   //原生的 keyup 事件
   keyup:(event)=>{},
   //原生的 keydown 事件
   keydown:(event)=>{},
   //原生的 keypress 事件
   keypress:(event)=>{},
  },
  validate:[
   { required: true, message: '请输入goods_name', trigger: 'blur' },
  ],
 }

validate 表单验证规则,具体配置查看 : https://github.com/yiminghe/async-validator

radio 单选框

radioRule :
{
  type:radio,//必填!
  //label名称
  title:是否包邮,//必填!
  //字段名称
  field:is_postage,//必填!
  //input值
  value:0,
  //可选参数
  options:[
   {value:0,label:不包邮,disabled:false},
   {value:1,label:包邮,disabled:true},
  ],//必填!
  props: {
   //可选值为 button 或不填,为 button 时使用按钮样式
   type:undefined, 
   //单选框的尺寸,可选值为 large、small、default 或者不设置
   size:default, 
   //是否垂直排列,按钮样式下无效
   vertical:false, 
  },
  event:{
   //在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发
   change:(...arg)=>{},
  },
  validate:[],
 }

checkbox 复选框

checkboxRule :
{
  type:checkbox,//必填!
  //label名称
  title:标签,//必填!
  //字段名称
  field:label,//必填!
  //input值
  value:[
   1,2,3
  ],
  //可选参数
  options:[
   {value:1,label:好用,disabled:true},
   {value:2,label:方便,disabled:false},
   {value:3,label:实用,disabled:false},
   {value:4,label:有效,disabled:false},
  ],//必填!
  props: {
   //多选框组的尺寸,可选值为 large、small、default 或者不设置
   size:default, 
  },
  event:{
   //只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发
   change:(...arg)=>{},
  },
  validate:[],
 }

select 选择器

selectRule :
{
  type: select,//必填!
  field: cate_id,//必填!
  title: 产品分类,//必填!
  //input值
  value: [104,105],
  //可选参数
  options: [
   {value: 104, label: 生态蔬菜, disabled: false},
   {value: 105, label: 新鲜水果, disabled: false},
  ],//必填!
  props: {
    //是否支持多选
   multiple: true, 
   //是否可以清空选项,只在单选时有效
   clearable: false,
   //是否支持搜索
   filterable: true, 
   // 暂不支持远程搜索
   // remote: false, //是否使用远程搜索
   // remote-method:Function, //远程搜索的方法
   // loading: false, //当前是否正在远程搜索
   // loading-text: 加载中, //远程搜索中的文字提示
   //选择框大小,可选值为large、small、default或者不填
   size:default, 
   //选择框默认文字
   placeholder: 请选择, 
    //当下拉列表为空时显示的内容
   not-found-text: 无匹配数据,
   //弹窗的展开方向,可选值为 bottom 和 top
   placement: bottom, 
   //是否禁用
   disabled: false, 
  },
  event:{
   //选中的Option变化时触发,返回 value
   change:(checked)=>{},
   //搜索词改变时触发
   'query-change':(keyword)=>{},
  },
  validate:[],
 }

switch 开关

switchRule :
{
  type:switch,//必填!
  //label名称
  title:是否上架,//必填!
  //字段名称
  field:is_show,//必填!
  //input值
  value:1,
  props: {
   //开关的尺寸,可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字,使用 large。
   size:default, 
   //禁用开关
   disabled:false,
   //选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用
   trueValue:1, 
   //没有选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用
   falseValue:0, 
  },
  slot: {
   //自定义显示打开时的内容
   open:上架, 
   //自定义显示关闭时的内容
   close:下架, 
  },
  event:{
   //开关变化时触发,返回当前的状态 0 | 1
   change:(bool)=>{},
  },
  validate:[],
 }

DatePicker 日期选择器

DatePickerRule :
{
  type: DatePicker,//必填!
  field: section_day,//必填!
  title: 活动日期,//必填!
  //input值, type为daterange,datetimerange value为数组 [start_value,end_value]
  value: ['2018-02-20', new Date()], 
  props: {
   //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month
   type: datetimerange,//必填!
   //展示的日期格式
   format: yyyy-MM-dd HH:mm:ss, 
   //日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
   placement: bottom-start, 
   //占位文本
   placeholder:请选择获得时间, 
   //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
   confirm:false, 
   //尺寸,可选值为large、small、default或者不设置
   size:default, 
   //是否禁用选择器
   disabled:false, 
   //是否显示清除按钮
   clearable:true, 
   //完全只读,开启后不会弹出选择器
   readonly:false, 
   //文本框是否可以输入
   editable:false, 
  },
  event:{
   //日期发生变化时触发,已经格式化后的日期,比如 2016-01-01
   change:(value)=>{},
   //弹出日历和关闭日历时触发 true | false
   'open-change':(bool)=>{},
   //在 confirm 模式或 clearable = true 时有效,在清空日期时触发
   clear:(...arg)=>{},
  },
  validate:[],
 }

TimePicker 时间选择器

TimePickerRule :
{
  type: TimePicker,//必填!
  field: section_time,//必填!
  title: 活动时间,//必填!
  //input值, type为timerange value为数组 [start_value,end_value]
  value: [], 
  props: {
   //显示类型,可选值为 time、timerange
   type: timerange, //必填!
   //展示的时间格式
   format: HH:mm:ss, 
   //下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。
   steps: [], 
   //时间选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
   placement: bottom-start, 
   //占位文本
   placeholder:请选择获得时间, 
   //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
   confirm:false, 
   //尺寸,可选值为large、small、default或者不设置
   size:default,
   //是否禁用选择器
   disabled:false, 
   //是否显示清除按钮
   clearable:true, 
   //完全只读,开启后不会弹出选择器
   readonly:false, 
   //文本框是否可以输入
   editable:false, 
  },
  event:{
   //时间发生变化时触发 已经格式化后的时间,比如 09:41:00
   change:(checked)=>{},
   //弹出浮层和关闭浮层时触发 true | false
   'open-change':(bool)=>{},
   //在清空日期时触发
   clear:(...arg)=>{},
  },
  validate:[],
 }

InputNumber 数字输入框

InputNumberRule :
{
  type: InputNumber,//必填!
  field: sort,//必填!
  title: 排序,//必填!
  //input值
  value: 1,
  props: {
   //最大值
   max: undefined, 
   //最小值
   min: undefined, 
   //每次改变的步伐,可以是小数
   step: 1, 
   //输入框尺寸,可选值为large、small、default或者不填
   size:default, 
   //设置禁用状态
   disabled:false, 
   //是否设置为只读
   readonly:false, 
   //是否可编辑
   editable:true, 
   //数值精度
   precision:0, 
  },
  event:{
   //数值改变时的回调,返回当前值
   change:(value)=>{},
   //聚焦时触发
   focus:(event)=>{},
   //失焦时触发
   blur:(event)=>{},
  },
  validate:[],
 }

ColorPicker 颜色选择器

ColorPickerRule :
{
  type: ColorPicker,//必填!
  field: color,//必填!
  title: 颜色,//必填!
  //input值
  value: '#ff7271', 
  props: {
   //是否支持透明度选择
   alpha: false, 
   //是否支持色彩选择
   hue: true, 
   //是否显示推荐的颜色预设
   recommend: false, 
   //尺寸,可选值为large、small、default或者不设置
   size:default, 
   //自定义颜色预设
   colors:[], 
   //颜色的格式,可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb,其它为 hex
   format:hex, 
  },
  event:{
   //当绑定值变化时触发,返回当前值
   change:(color)=>{},
   //聚焦时触发 面板中当前显示的颜色发生改变时触发
   'active-change':(color)=>{},
  },
  validate:[],
 }

Cascader 多级联动

CascaderRule:
{
  type:cascader,//必填!
  title:所在区域,//必填!
  field:address,//必填!
  //input值
  value:['陕西省','西安市','新城区'],
  props:{
   //可选项的数据源,格式参照示例说明
   data:window.province || [],//必填!
   //选择后展示的函数,用于自定义显示格式
   renderFormat:label => label.join(' / '),
   //是否禁用选择器
   disabled:false,
   //是否支持清除
   clearable:true,
   //输入框占位符
   placeholder:'请选择',
   //次级菜单展开方式,可选值为 click 或 hover
   trigger:'click',
   //当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的示例
   changeOnSelect:false,
   //输入框大小,可选值为large和small或者不填
   size:undefined,
   //动态获取数据,数据源需标识 loading
   loadData:()=>{},
   //是否支持搜索
   filterable:false,
   //当搜索列表为空时显示的内容
   notFoundText:'无匹配数据',
   //是否将弹层放置于 body 内,在 Tabs、带有 fixed 的 Table 列内使用时,建议添加此属性,它将不受父级样式影响,从而达到更好的效果
   transfer:false,
  },
  event:{
   //选择完成后的回调,返回值 value 即已选值 value,selectedData 为已选项的具体数据
   change:(value, selectedData)=>{},
   //展开和关闭弹窗时触发
   'visible-change':bool=>{}
  },
  validate:[],
 }

Upload 上传

UploadRule :
{
  type: Upload,//必填!
  field: pic,//必填!
  title: 轮播图,//必填!
  //input值,当maxLength等与1时值为字符串,大于1时值为数组
  value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值
  props: {
   //上传控件的类型,可选值为 select(点击选择),drag(支持拖拽)
   type:select, //必填!
   //上传文件类型,可选值为 image(图片上传),file(文件上传)
   uploadType:image, //必填!
   //上传的地址
   action: , //必填! 
   //上传的文件字段名
   name:, 
   //上传时附带的额外参数
   data:{}, 
   //设置上传的请求头部
   headers: {}, 
   //是否支持多选文件
   multiple: true,
   //支持发送 cookie 凭证信息
   withCredentials:false, 
   //不支持
   // showUploadList:false, //是否显示已上传文件列表
   // defaultFileList:[], // 默认已上传的文件列表
   //接受上传的文件类型
   accept:,
   //支持的文件类型,与 accept 不同的是,format 是识别文件的后缀名,accept 为 input 标签原生的 accept 属性,会在选择文件时过滤,可以两者结合使用
   format:[], 
   //文件大小限制,单位 kb
   maxSize:undefined, 
   //可上传文件数量
   maxLength:1,
   //上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
   beforeUpload:()=>{}, 
   //文件上传时的钩子,返回字段为 event, file, fileList
   onProgress:()=>{}, 
   //文件上传成功时的钩子,返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
   onSuccess:function () {
    return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
   }, //必填!
   //文件上传失败时的钩子,返回字段为 error, file, fileList
   onError:(error, file, fileList)=>{}, 
   //点击已上传的文件链接时的钩子,返回字段为 file, 可以通过 file.response 拿到服务端返回数据
   onPreview:()=>{}, 
   //文件列表移除文件时的钩子,返回字段为 file, fileList
   onRemove:()=>{}, 
   //文件格式验证失败时的钩子,返回字段为 file, fileList
   onFormatError:()=>{}, 
   //文件超出指定大小限制时的钩子,返回字段为 file, fileList
   onExceededSize:()=>{}, 
   //辅助操作按钮的图标 ,设置为false将不显示
   handleIcon:'ionic',
   //点击辅助操作按钮事件
   onHandle:(src)=>{},
   //是否可删除,设置为false是不显示删除按钮
   allowRemove:true,
  },
 }

accept 文件类型: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

全局配置 createOptions

{
 //插入节点,默认document.body
 el:null,
 //form配置
 form:{
  //是否开启行内表单模式
  inline:false,
  //表单域标签的位置,可选值为 left、right、top
  labelPosition:'right',
  //表单域标签的宽度,所有的 FormItem 都会继承 Form 组件的 label-width 的值
  labelWidth:125,
  //是否显示校验错误信息
  showMessage:true,
  //原生的 autocomplete 属性,可选值为 off 或 on
  autocomplete:'off',
 },
 //文件上传全局配置
 upload:{
  //上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
  beforeUpload:()=>{},
  //文件上传时的钩子,返回字段为 event, file, fileList
  onProgress:(event, file, fileList)=>{},
  //文件上传成功时的钩子,返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
  onSuccess:(response, file, fileList)=>{
   // return 'filePath';
  },
  //文件上传失败时的钩子,返回字段为 error, file, fileList
  onError:(error, file, fileList)=>{},
  //点击已上传的文件链接时的钩子,返回字段为 file, 可以通过 file.response 拿到服务端返回数据
  onPreview:(file)=>{},
  //文件列表移除文件时的钩子,返回字段为 file, fileList
  onRemove:(file, fileList)=>{},
  //文件格式验证失败时的钩子,返回字段为 file, fileList
  onFormatError:(file, fileList)=>{},
  //文件超出指定大小限制时的钩子,返回字段为 file, fileList
  onExceededSize:(file, fileList)=>{},
  //辅助操作按钮的图标 ,设置为false将不显示
  handleIcon:'ios-eye-outline',
  //点击辅助操作按钮事件
  onHandle:(src)=>{},
  //是否可删除,设置为false是不显示删除按钮
  allowRemove:true,
 },
 //表单提交事件
 onSubmit:(formData)=>{},
 //提交按钮配置,设置为false时不显示按钮
 submitBtn:{
  //按钮类型,可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
  type:primary,
  //按钮大小,可选值为large、small、default或者不设置
  size:large,
  //按钮形状,可选值为circle或者不设置
  shape:undefined,
  //开启后,按钮的长度为 100%
  long:true,
  //设置button原生的type,可选值为button、submit、reset
  htmlType:button,
  //设置按钮为禁用状态
  disabled:false,
  //设置按钮的图标类型
  icon:ios-upload,
  //按钮文字提示
  innerText:提交,
  //设置按钮为加载中状态
  loading:false,
 }
}

相信看了本文案例你已经掌握了方法,更多精彩请关注编程之家网其它相关文章!

推荐阅读:

怎样使用Vue操作DIV

利用Node.js进行文件编码格式转换

相关文章

小程序用什么css框架
概述 消息能力是小程序能力中的重要组成,我们为开发者提供了...
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...