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

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

这次给大家带来VUE做出带有数据收集、校验和提交功能表单，VUE做出带有数据收集、校验和提交功能表单的

注意事项

有哪些，下面就是实战案例，一起来看一下。

示例

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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-

引入

-

注意! 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() 获取表单的valuegetValue(field) 获取指定字段的valuechangeField(field,value) 修改指定字段的valueresetFields() 重置表单destroy() 销毁表单removeField(field) 删除指定字段fields() 获得表单所有字段名称submit() 表单验证通过后提交表单,触发onSubmit事件validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFnvalidateField(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 输入框

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 上传

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

全局配置 createOptions

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。