具有數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素以及時(shí)間選擇,日期選擇,顏色選擇,文件/圖片上傳功能。

示例

安裝

npm install form-create

OR

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

引入

<!-- import Vue -->
<script src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif" import iview -->
<link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css">
<script src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif" import formCreate -->
<script src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="http://www.argcandargv.com/skin/default/image/nopic.gif">
使用
let rules = [],el = document.body;
new Vue({
  mounted:function(){
    var $f = this.$formCreate(rules,el);
  }
})
$formCreate 參數(shù)
rules  表單規(guī)則  [inputRule,selectRule,...]
el  插入的Dom節(jié)點(diǎn) 默認(rèn)為 document.body
$f 實(shí)例方法
獲得表單數(shù)據(jù)
$f.formData()
修改表單數(shù)據(jù)
$f.changeField(field,value)
表單驗(yàn)證
$f.validate(successFn,errorFn)
表單驗(yàn)證指定字段
$f.validateField(field,errorFn)
重置表單
$f.resetFields()
移除表單
$f.remove()
獲得表單所有字段
$f.fields()
提交表單
$f.submit()
rules 規(guī)則:
hidden 隱藏字段
hiddenRule:
{
  type:"hidden",
  field:"id", //字段名稱
  value:"14" //input值
}
input 輸入框
inputRule :
{
  type:"input",
  title:"商品名稱", //label名稱
  field:"goods_name" , //字段名稱
  value:"iphone 7", //input值,
  props: {
        "type": "text", //輸入框類型，可選值為 text、password、textarea、url、email、date
        "clearable":false, //是否顯示清空按鈕
        "disabled": false, //設(shè)置輸入框?yàn)榻�用狀態(tài)
        "readonly": false, //設(shè)置輸入框?yàn)橹蛔x
        "rows": 4, //文本域默認(rèn)行數(shù)，僅在 textarea 類型下有效
        "autosize": false, //自適應(yīng)內(nèi)容高度，僅在 textarea 類型下有效，可傳入對(duì)象，如 { minRows: 2, maxRows: 6 }
        "number": false, //將用戶的輸入轉(zhuǎn)換為 Number 類型
        "autofocus": false, //自動(dòng)獲取焦點(diǎn)
        "autocomplete": "off", //原生的自動(dòng)完成功能，可選值為 off 和 on
        "placeholder": "請(qǐng)輸入商品名稱", //占位文本
        "size": "default", //輸入框尺寸，可選值為large、small、default或者不設(shè)置,
        "spellcheck": false //原生的 spellcheck 屬性
    },
  validate:[
     { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
     { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
   ]
}
validate 表單驗(yàn)證規(guī)則，具體配置查看 : https://github.com/yiminghe/async-validator
radio 單選框
radioRule :
{
  type:"radio",
  title:"是否包郵",
  field:"is_postage",
  value:"0", //input值,
  options:[
    {value:"0",label:"不包郵",disabled:false},
    {value:"1",label:"包郵",disabled:true}
  ],
  props: {
        "type":undefined, //可選值為 button 或不填，為 button 時(shí)使用按鈕樣式
        "size":"default", //單選框的尺寸，可選值為 large、small、default 或者不設(shè)置
        "vertical":false //是否垂直排列，按鈕樣式下無(wú)效
    },
  validate:[]
}
checkbox 復(fù)選框
checkboxRule :
{
  type:"checkbox",
  title:"標(biāo)簽",
  field:"label",
  value:[
    "1","2","3"
  ],//input值,
  options:[
    {value:"1",label:"好用",disabled:true},
    {value:"2",label:"方便",disabled:false},
    {value:"3",label:"實(shí)用",disabled:false},
    {value:"4",label:"有效",disabled:false}
  ],
  props: {
        "size":"default" //多選框組的尺寸，可選值為 large、small、default 或者不設(shè)置
    },
  validate:[]
}
switch 開(kāi)關(guān)
switchRule :
{
  type:"switch",
  title:"是否上架",
  field:"is_show",
  value:"1",//input值,
  props: {
        "size":"default", //開(kāi)關(guān)的尺寸，可選值為large、small、default或者不寫。建議開(kāi)關(guān)如果使用了2個(gè)漢字的文字，使用 large。
        "disabled":false,//禁用開(kāi)關(guān)
        "truevalue":"1", //選中時(shí)的值，當(dāng)使用類似 1 和 0 來(lái)判斷是否選中時(shí)會(huì)很有用
        "falsevalue":"0" //沒(méi)有選中時(shí)的值，當(dāng)使用類似 1 和 0 來(lái)判斷是否選中時(shí)會(huì)很有用
    },
  slot: {
    open:"上架", //自定義顯示打開(kāi)時(shí)的內(nèi)容
    close:"下架" //自定義顯示關(guān)閉時(shí)的內(nèi)容
  }, //slot可以不用配置
  validate:[]
}
select 選擇器
selectRule :
{
    type: "select",
    field: "cate_id",
    title: "產(chǎn)品分類",
    value: "104", //input值, multiple為true時(shí) value為數(shù)組 [value,value,...]
    props: {
        "multiple": false, //是否支持多選
        "clearable": false, //是否可以清空選項(xiàng)，只在單選時(shí)有效
        "filterable": false, //    是否支持搜索
        // 暫不支持遠(yuǎn)程搜索
        // "remote": false, //是否使用遠(yuǎn)程搜索
        // "remote-method":()=>{}, //遠(yuǎn)程搜索的方法
        // "loading": false, //當(dāng)前是否正在遠(yuǎn)程搜索
        // "loading-text": "加載中", //遠(yuǎn)程搜索中的文字提示
        "size":"default", //選擇框大小，可選值為large、small、default或者不填
        "placeholder": "請(qǐng)選擇", //選擇框默認(rèn)文字
        "not-found-text": "無(wú)匹配數(shù)據(jù)", //當(dāng)下拉列表為空時(shí)顯示的內(nèi)容
        "placement": "bottom", //彈窗的展開(kāi)方向，可選值為 bottom 和 top
        "disabled": false //是否禁用
    },
    options: [
      {"value": "104", "label": "生態(tài)蔬菜", "disabled": false},
      {"value": "105", "label": "新鮮水果", "disabled": false}
    ]
}
DatePicker 日期選擇器
DatePickerRule :
{
    type: "DatePicker",
    field: "section_day",
    title: "活動(dòng)日期",
    value: 1519110955000 || new Date(), //input值, type為daterange,datetimerange value為數(shù)組 [start_value,end_value]
    props: {
        "type": "date", //顯示類型，可選值為 date、daterange、datetime、datetimerange、year、month
        "format": "yyyy-MM-dd", //展示的日期格式
        "placement": "bottom-start", //    日期選擇器出現(xiàn)的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
        "placeholder":"請(qǐng)選擇獲得時(shí)間", //占位文本
        "/confirm/i":false, //是否顯示底部控制欄，開(kāi)啟后，選擇完日期，選擇器不會(huì)主動(dòng)關(guān)閉，需用戶確認(rèn)后才可關(guān)閉
        "size":"default", //尺寸，可選值為large、small、default或者不設(shè)置
        "disabled":false, //是否禁用選擇器
        "clearable":true, //是否顯示清除按鈕
        "readonly":false, //完全只讀，開(kāi)啟后不會(huì)彈出選擇器
        "editable":false //文本框是否可以輸入
    },
    validate:[]
}
TimePicker 時(shí)間選擇器
TimePickerRule :
{
    type: "TimePicker",
    field: "section_time",
    title: "活動(dòng)時(shí)間",
    value: [], //input值, type為timerange value為數(shù)組 [start_value,end_value]
    props: {
        "type": "timerange", //顯示類型，可選值為 time、timerange
        "format": "HH:mm:ss", //展示的時(shí)間格式
        "steps": [], //下拉列表的時(shí)間間隔，數(shù)組的三項(xiàng)分別對(duì)應(yīng)小時(shí)、分鐘、秒。例如設(shè)置為 [1, 15] 時(shí)，分鐘會(huì)顯示：00、15、30、45。
        "placement": "bottom-start", //    時(shí)間選擇器出現(xiàn)的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
        "placeholder":"請(qǐng)選擇獲得時(shí)間", //占位文本
        "/confirm/i":false, //是否顯示底部控制欄，開(kāi)啟后，選擇完日期，選擇器不會(huì)主動(dòng)關(guān)閉，需用戶確認(rèn)后才可關(guān)閉
        "size":"default", //尺寸，可選值為large、small、default或者不設(shè)置
        "disabled":false, //是否禁用選擇器
        "clearable":true, //是否顯示清除按鈕
        "readonly":false, //完全只讀，開(kāi)啟后不會(huì)彈出選擇器
        "editable":false //文本框是否可以輸入
    },
    validate:[]
}
InputNumber 數(shù)字輸入框
InputNumberRule :
{
    type: "InputNumber",
    field: "sort",
    title: "排序",
    value: 0, //input值
    props: {
        "max": undefined, //最大值
        "min": undefined, //最小值
        "step": 1, //每次改變的步伐，可以是小數(shù)
        "size":"default", //輸入框尺寸，可選值為large、small、default或者不填
        "disabled":false, //設(shè)置禁用狀態(tài)
        "readonly":false, //是否設(shè)置為只讀
        "editable":true, //是否可編輯
        "precision":0 //數(shù)值精度
    },
    validate:[]
}
ColorPicker 顏色選擇器
ColorPickerRule :
{
    type: "ColorPicker",
    field: "coloe",
    title: "顏色",
    value: '#ff7271', //input值
    props: {
        "alpha": false, //是否支持透明度選擇
        "hue": true, //是否支持色彩選擇
        "recommend": false, //是否顯示推薦的顏色預(yù)設(shè)
        "size":"default", //尺寸，可選值為large、small、default或者不設(shè)置
        "colors":[], //自定義顏色預(yù)設(shè)
        "format":"hex" //顏色的格式，可選值為 hsl、hsv、hex、rgb,開(kāi)啟 alpha 時(shí)為 rgb，其它為 hex
    },
    validate:[]
}
Upload 上傳
UploadRule :
{
    type: "Upload",
    field: "pic",
    title: "輪播圖",
    value: [], //input值
    props: {
        "type":"select", //上傳控件的類型，可選值為 select（點(diǎn)擊選擇），drag（支持拖拽）
        "action": "", //上傳的地址，必填
        "headers": {}, //設(shè)置上傳的請(qǐng)求頭部
        "multiple": false, //是否支持多選文件
        "data":{}, //上傳時(shí)附帶的額外參數(shù)
        "name":"", //上傳的文件字段名
        "with-credentials":false, //支持發(fā)送 cookie 憑證信息
        "show-upload-list":true, //是否顯示已上傳文件列表
        "accept":"", //接受上傳的文件類型
        "format":[], //支持的文件類型，與 accept 不同的是，format 是識(shí)別文件的后綴名，accept 為 input 標(biāo)簽原生的 accept 屬性，會(huì)在選擇文件時(shí)過(guò)濾，可以兩者結(jié)合使用
        "max-size":undefined, //文件大小限制，單位 kb
        "beforeUpload":()=>{}, //上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者 Promise 則停止上傳
        "onProgress":()=>{}, //文件上傳時(shí)的鉤子，返回字段為 event, file, fileList
        "onSuccess":( push, response, file, fileList)=>{
          let filePath = response.data.filePath;
          push(filePath);
          //其他操作
        }, //文件上傳成功時(shí)的鉤子，返回字段為 push, response, file, fileList.  push(filePath) 將上傳后的路徑添加到value中
        "onError":()=>{}, //文件上傳失敗時(shí)的鉤子，返回字段為 error, file, fileList
        "onPreview":()=>{}, //點(diǎn)擊已上傳的文件鏈接時(shí)的鉤子，返回字段為 file， 可以通過(guò) file.response 拿到服務(wù)端返回?cái)?shù)據(jù)
        "onRemove":()=>{}, //文件列表移除文件時(shí)的鉤子，返回字段為 file, fileList
        "onFormatError":()=>{}, //文件格式驗(yàn)證失敗時(shí)的鉤子，返回字段為 file, fileList
        "onExceededSize":()=>{}, //文件超出指定大小限制時(shí)的鉤子，返回字段為 file, fileList
        "default-file-list":[
            {
                name: 'img1.jpg',
                url: 'http://www.xxx.com/img1.jpg'
            },
            {
                name: 'img2.jpg',
                url: 'http://www.xxx.com/img2.jpg'
            }
        ] // 默認(rèn)已上傳的文件列表
    },
    validate:[]
}
accept 文件類型： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept
相關(guān)推薦：
form實(shí)現(xiàn)自動(dòng)提交代碼分享
HTML的form標(biāo)簽用法
Javascript實(shí)現(xiàn)動(dòng)態(tài)添加Form表單元素的方法示例
以上就是動(dòng)態(tài)生成form表單實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！