当前位置：首页 > news >正文

用生成器函数生成表单各字段

news 2025/8/10 1:10:37

生成器函数生成表单字段是非常合适的用法,避免你要用纯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:'用&emsp;户&emsp;',className:'regInput'},{type:'password',name:'pwd',label:'密&emsp;码&emsp;',className:'regInput'},{type:'password',name:'pwd2',label:'重&emsp;复&emsp;',className:'regInput'},{type:'email',name:'yourEmail',placeholder:'输入电子邮件',label:'邮&emsp;件&emsp;',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>