Form

代码演示

API

Form 参数说明

参数 说明 类型 默认值
submitCallBack 表单验证回调函数,参数两个,第一个为校验是否成功true/false 第二个为表单内元素数组[{name: "", verify: false, value: ""}] function -
submitAreaClassName 表单提交区域class string -
submitBtnClassName 表单提交按钮class string -
beforeSubmitBtn 表单提交按钮之前的dom node -
afterSubmitBtn 表单提交按钮之后的dom node -
useRow 是否使用栅格布局,如使用:需要再FormItem传格子数和label的格子数 bool -
showSubmit 是否显示提交区域 bool true
checkFormNow 是否立即校验,校验完成后将checkFormNow置为false,否则在form渲染的时候会直接校验 bool false

FormItem 参数说明

参数 说明 类型 默认值
isRequire 是否必填 bool false
errorMessage 错误提示信息 node "校验失败"
htmlType 数值类型,目前支持 email/tel/IDCard/chinese/password'类型 string -
reg 校验正则,注:设置 htmlType 后 reg 无效 regExp -
method 何时校验 change/blur string -
blur 失去焦点的回调函数 function -
change 改变值的回调函数 function -
check 验证的回调函数,参数两个,第一个为校验是否成功true/false 第二个为验证结果对象{name: "", verify: false, value: ""} function -
inline 是否行内显示,须有Form才有效,单个FormItem无效 bool false
labelName 输入框label标签内容 node -
showMast 是否显示必输项的* bool false
labelClassName 输入框label标签的class string -
mesClassName 校验错误信息的class string -
inputBefore input前缀 node -
inputBefore input后缀 node -
xs 移动设备显示列数(<768px) number -
sm 小屏幕桌面设备显示列数(≥768px) number -
md 中等屏幕设备显示列数(≥992px) number -
lg 大屏幕设备显示列数(≥1200px) number -
xsPull 移动屏幕设备到右边距列数 number -
smPull 小屏幕设备到右边距列数 number -
mdPull 中等屏幕设备到右边距列数 number -
lgPull 大屏幕设备到右边距列数 number -
xsPush 移动屏幕设备到左边距列数 number -
smPush 小屏幕设备到左边距列数 number -
mdPush 中等屏幕设备到左边距列数 number -
lgPush 大屏幕设备到左边距列数 number -
xsOffset 移动设备偏移列数 number -
smOffset 小屏幕设备偏移列数 number -
mdOffset 中等屏幕设备偏移列数 number -
lgOffset 大屏幕设备偏移列数 number -
labelXs label移动设备显示列数(<768px) number -
labelSm label小屏幕桌面设备显示列数(≥768px) number -
labelMd label中等屏幕设备显示列数(≥992px) number -
labelLg label大屏幕设备显示列数(≥1200px) number -
labelXsPull label移动屏幕设备到右边距列数 number -
labelSmPull label小屏幕设备到右边距列数 number -
labelMdPull label中等屏幕设备到右边距列数 number -
labelLgPull label大屏幕设备到右边距列数 number -
labelXsPush label移动屏幕设备到左边距列数 number -
labelSmPush label小屏幕设备到左边距列数 number -
labelMdPush label中等屏幕设备到左边距列数 number -
labelLgPush label大屏幕设备到左边距列数 number -
labelXsOffset label移动设备偏移列数 number -
labelSmOffset label小屏幕设备偏移列数 number -
labelMdOffset label中等屏幕设备偏移列数 number -
labelLgOffset label大屏幕设备偏移列数 number -

自定义组件说明

  • 需要有onChange方法,并且参数为改变后的值
  • 默认值为defaultValue

其它说明

  • ~Form的子元素中如果有Button并且此ButtonisSubmit=true`,则可以作为提交按钮
  • Form整体校验时,会触发FormItem的校验
  • FormItem的子元素,name必须存在且不能重复
  • 组件初期,FormItem子元素只能存在一个,可以使用 FormControl 或者 Select
  • 尽量不要再FormItem的子元素增加onBluronChange方法。如必须写,这两个方法的参数为子元素的值