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

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

news 2025/12/16 6:37:29

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

相关文章：

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

生成器函数生成表单字段是非常合适的用法,避免你要用纯javascript做后台时频繁的制作表单&#xff0c;而不能重复利用 //这里是javascript部分&#xff0c;formfiled.js //生成器函数对字段的处理&#xff0c;让各字段name\className\label\value\placeholder赋值到input的属性…...

编程日记 2024/8/19 5:45:45

【xilinx】O-RAN 无线电接口 - Vivado 2020.1 及更新工具版本的发行说明

描述 记录包含 O-RAN 无线电接口 LogiCORE IP 的发行说明和已知问题&#xff0c;包括以下内容&#xff1a; 一般信息已知和已解决的问题 解决方案 一般信息 可以在以下三个位置找到支持的设备&#xff1a; O-RAN 无线电接口 IP 产品指南&#xff08;需要访问O-RAN 安全站点&…...

编程日记 2024/8/19 5:44:44

结营考试- 算法进阶营地 - DAY11

结营考试 - 算法进阶营地 - DAY11 测评链接&#xff1b; A - 打卡题 考点&#xff1a;枚举&#xff1b; 分析 枚举 a _①_ b _②_ c d&#xff0c;中两个运算符的 3 3 3 种可能性&#xff0c;尝试寻找一种符合要求的答案。 参考代码 #include <bits/stdc.h> usi…...

编程日记 2024/8/19 5:43:39

设计模式: 访问者模式

文章目录 一、介绍二、模式结构三、优缺点1、优点2、缺点 四、应用场景 一、介绍 Visitor 模式&#xff08;访问者模式&#xff09;是一种行为设计模式&#xff0c;它允许在不修改对象结构的前提下&#xff0c;增加作用于一组对象上新的操作。就增加新的操作而言&#xff0c;V…...

编程日记 2024/8/19 5:40:34

selenium底层原理详解

目录 1、selenium版本的演变 1.1、Selenium 1.x&#xff08;Selenium RC时代&#xff09; 1.2、Selenium 2.x&#xff08;WebDriver整合时代&#xff09; 1.3、Selenium 3.x 2、selenium原理说明 3、源码说明 3.1、启动webdriver服务建立连接 3.2、发送操作 1、seleni…...

编程日记 2024/8/19 5:38:28

【Solidity】继承

继承 Solidity 中使用 is 关键字实现继承&#xff1a; contract Father {function getNumber() public pure returns (uint) {return 10;}function getNumber2() public pure virtual returns (uint) {return 20;} }contract Son is Father {}现在 Son 就可以调用 Father 的 …...

编程日记 2024/8/19 5:34:14

docker 安装mino服务，启动报错： Fatal glibc error: CPU does not support x86-64-v2

背景 docker 安装mino服务&#xff0c;启动报错&#xff1a; Fatal glibc error: CPU does not support x86-64-v2 原因 Docker 镜像中的 glibc 版本要求 CPU 支持 x86-64-v2 指令集&#xff0c;而你的硬件不支持。 解决办法 降低minio对应的镜像版本 经过验证&#xff1a;qu…...

编程日记 2024/8/19 5:32:09

地图相册系统的设计与实现

摘 要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&a…...

编程日记 2024/8/19 5:31:07

使用vh和rem实现元素响应式布局

示例代码 height: calc(100vh 30rem) vh&#xff08;Viewport Height&#xff09;&#xff1a;vh是一个相对单位&#xff0c;代表浏览器窗口高度的百分比&#xff0c;例如20vh就是浏览器窗口高度的20%。 rem&#xff08;root em&#xff09;&#xff1a;rem是通过html根元素…...

编程日记 2024/8/19 5:30:06

螺旋矩阵 II（LeetCode）

题目 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 解题 def generateMatrix(n):matrix [[0] * n for _ in range(n)]top, bottom 0, n - 1left, right 0, n - 1num 1while top <…...

编程日记 2024/8/19 5:29:04

如何快速掌握一款MCU

了解MCU特点 rom &#xff0c;ramgpiotimerpower 明确哪些资源是项目开发需要的 认真理解相关资料模块 开始编程 编写特别的验证程序&#xff08;项目不紧&#xff09;按照自己的理解编写&#xff08;老司机&#xff0c;时间紧张&#xff09; 掌握MCU基本功能 定时器 固…...

编程日记 2024/8/19 5:28:02

XSS-DOM

文章目录 源码SVG标签Dom-Clobbringtostring 源码 <script>const data decodeURIComponent(location.hash.substr(1));;const root document.createElement(div);root.innerHTML data;// 这里模拟了XSS过滤的过程&#xff0c;方法是移除所有属性&#xff0c;sanitize…...

编程日记 2024/8/19 5:25:58

uniapp去掉页面导航条

在pages.json文件中&#xff0c;globalStyle中添加 ”app-plus“:{"titleNView":false }...

编程日记 2024/8/19 5:23:55

MySQL数据库专栏（三）数据库服务维护操作

1、界面维护&#xff0c;打开服务窗口找到MySQL服务&#xff0c;右键单击可对服务进行启动、停止、重启等操作。 选择属性&#xff0c;还可以设置启动类型为自动、手动、禁用。 2、指令维护 卸载服务&#xff1a;sc delete [服务名称] 例如&#xff1a;sc delete MySQL 启动服…...

编程日记 2024/8/19 5:21:52

【QT】基于UDP/TCP/串口 的Ymodom通讯协议客户端

【QT】基于UDP/TCP/串口的Ymodom通讯协议客户端 前言Ymodom实现QT实现开源库的二次开发-1开源库的二次开发-2 串口方式实现TCP方式实现UDP方式实现补充&#xff1a;文件读取补充&#xff1a;QT 封装成EXE 前言 Qt 运行环境 Desktop_Qt_5_11_2_MSVC2015_64bit &#xff0c;基于…...

编程日记 2024/8/19 5:20:48

超详细！！！electron-vite-vue开发桌面应用之引入UI组件库element-plus（四）

云风网 云风笔记 云风知识库 一、安装element-plus以及图标库依赖 npm install element-plus --save npm install element-plus/icons-vue npm i -D unplugin-icons二、vite按需引入插件 npm install -D unplugin-vue-components unplugin-auto-importunplugin-vue-componen…...

编程日记 2024/8/19 5:19:45

【排序篇】实现快速排序的三种方法

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 文章目录 1 交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本1.2.2 挖坑法1.2.3 前后指针…...

编程日记 2024/8/19 5:18:43

Java 标识符（详解）

文章目录 一、简介二、命名规则三、命名规范 一、简介 在 Java 中&#xff0c;用于给变量、类、方法等命名的符号组合&#xff0c;我们称之为Java标识符&#xff0c;它就像是给这些编程元素贴上的独特标签&#xff0c;以便在程序中能够准确地引用和操作它们。 二、命名规则 标…...

编程日记 2024/8/19 5:17:42

2024年，有哪些优质的计算机书籍推荐？

在2024年&#xff0c;计算机领域的新书层出不穷&#xff0c;涵盖了从基础理论到前沿技术的多个方面。以下是今年出版的几本备受关注的计算机新书。 1. AI与机器学习类 1、深度学习详解 1.李宏毅老师亲笔推荐&#xff0c;杨小康、周明、叶杰平、邱锡鹏鼎力推荐! 2.数百万次播…...

编程日记 2024/8/19 5:12:35

Python基础知识点--总结

1. 注释 注释用于提高代码的可读性&#xff0c;在代码中添加说明文字&#xff0c;使代码更容易理解。 单行注释&#xff1a;使用 # 符号开头&#xff0c;注释内容在符号之后的行内。多行注释&#xff1a;使用三引号&#xff08; 或 """&#xff09;包裹注释内…...

编程日记 2024/8/19 5:09:31

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/12/16 5:37:18

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/12/9 0:43:27

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/12/9 4:33:58

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/12/15 5:18:44

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2025/12/5 7:25:55

车载诊断架构 --- ZEVonUDS（J1979-3）简介第一篇

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…...

编程新知 2025/12/8 0:22:42

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

编程新知 2025/12/15 21:00:22