广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

这次给大家带来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.gitcd form-createnpm 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 单选框

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install0

checkbox 复选框

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install1

select 选择器

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install2

switch 开关

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install3

DatePicker 日期选择器

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install4

TimePicker 时间选择器

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install5

InputNumber 数字输入框

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install6

ColorPicker 颜色选择器

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install7

Cascader 多级联动

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install8

Upload 上传

git clone https://github.com/xaboy/form-create.gitcd form-createnpm install9

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

全局配置 createOptions

<!-- 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>0

相信看了本文案例你已经掌握了方法，更多精彩请关注9543建站博客其它相关文章！

推荐阅读：

怎样使用Vue操作DIV

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

以上就是VUE做出带有数据收集、校验和提交功能表单的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~