生成器函数生成表单字段是非常合适的用法,避免你要用纯javascript做后台时频繁的制作表单,而不能重复利用
//这里是javascript部分,formfiled.js
//生成器函数对字段的处理,让各字段name\className\label\value\placeholder赋值到input的属性上
function * formFieldGenerator(fields)
{
for(const field of fields)
{
switch(field.type)
{
case 'text':
if(field.value.trim()==='' || field.value.toString()==='undefined')
{
yield `<div class="${field.className}"><label>${field.label}<input type="text" name="${field.name}" value="" placeholder="${field.placeholder}" autocomplete="off"></label></div>`;
}else
{
yield `<div class="${field.className}"><label>${field.label}<input type="text" name="${field.name}" value="${field.value}" placeholder="${field.placeholder}" autocomplete="off"></label></div>`
}
break;
case 'email':
yield `<div class="${field.className}"><label>${field.label}<input type="email" name="${field.name}" value="${field.value || ''}" placeholder="${field.placeholder}" autocomplete="off"></label></div>`;
break;
case 'password':
yield `<div class="${field.className}"><label>${field.label}<input type="password" name="${field.name}" value="${field.value||''}" autocomplete="off"></label></div>`;
break;
case 'checkbox':
yield `<label><input type="checkbox" name="${field.name}" value="${field.value}">${field.label}</label>`;
break;
case 'submit':
yield `<div class="${field.className}"><input type="submit" name="${field.name}" value="${field.value}"></div>`;
break;
case 'button':
yield `<div class="${field.className}"><input type="button" name="${field.name}" value="${field.value}"></div>`;
break;
default:
yield `<!---不支持此字段:${field.type}-->`;
}
}
}
//字段配置表,你需要生成那些字段,按类型进行编写
const formFields=[
{type:'text',name:'username',placeholder:'请输入用户名',value:'',label:'用 户 ',className:'regInput'},
{type:'password',name:'pwd',label:'密 码 ',className:'regInput'},
{type:'password',name:'pwd2',label:'重 复 ',className:'regInput'},
{type:'email',name:'yourEmail',placeholder:'输入电子邮件',label:'邮 件 ',className:'regInput'},
{type:'checkbox',name:'language',label:'javascript',value:'javascript'},
{type:'checkbox',name:'language',label:'php',value:'php'},
{type:'checkbox',name:'language',label:'java',value:'java'},
{type:'checkbox',name:'language',label:'nodejs',value:'nodejs'},
{type:'submit',name:'regsubmit',value:'提交',className:'btn1'},
];
//获取html上的容器,将创建的表单添加进去
const formHtml=document.createElement('form1');
//设置表单的属性
formHtml.setAttribute('action','submit_form.php');
formHtml.setAttribute('method','post');
formHtml.setAttribute('name','regform1');
//利用formFieldGenerator(formFields)生成器函数安字段配置表生成表单内容
formHtml.innerHTML=Array.from(formFieldGenerator(formFields)).join('');
//加入容器内
document.getElementById('container').appendChild(formHtml);
//前端生成表单index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>用生成器生成表单</title>
<style type="text/css">
#container
{
width: 1050px;
margin: 5px auto;
border: 1px solid red;
text-align: center;
font-size: 16px;
padding-top:10px;
}
.regInput
{
margin-bottom: 15px;
}
.regInput label
{
font-family: Arial, Helvetica, sans-serif;
}
.regInput input
{
text-indent: 5px;
}
.btn1
{
margin-top: 15px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script src="formfiled.js"></script>
</body>
</html>