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

cdcdhj

于 2024-08-18 21:33:27 发布

阅读量108

点赞数 4

分类专栏： javascript学习日记文章标签： javascript 前端

本文链接：https://blog.csdn.net/cdcdhj/article/details/141305814

版权

javascript学习日记专栏收录该内容

138 篇文章 0 订阅

订阅专栏

生成器函数生成表单字段是非常合适的用法,避免你要用纯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>

cdcdhj

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用生成器函数生成表单各字段

生成器函数生成表单字段是非常合适的用法,避免你要用纯javascript做后台时频繁的制作表单，而不能重复利用。//这里是javascript部分，formfiled.js。//前端生成表单index.html。
复制链接

扫一扫

专栏目录