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

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

news 2026/3/30 5:59:33

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

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

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

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

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

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

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

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

设计模式: 访问者模式

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

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

selenium底层原理详解

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

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

继承 Solidity 中使用 is 关键字实现继承： 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服务，启动报错： Fatal glibc error: CPU does not support x86-64-v2 原因 Docker 镜像中的 glibc 版本要求 CPU 支持 x86-64-v2 指令集，而你的硬件不支持。解决办法降低minio对应的镜像版本经过验证：qu…...

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

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

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

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

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

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

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

螺旋矩阵 II（LeetCode）

题目给你一个正整数 n ，生成一个包含 1 到 n2 所有元素，且元素按顺时针顺序螺旋排列的 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 ，ramgpiotimerpower 明确哪些资源是项目开发需要的认真理解相关资料模块开始编程编写特别的验证程序（项目不紧）按照自己的理解编写（老司机，时间紧张） 掌握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过滤的过程，方法是移除所有属性，sanitize…...

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

uniapp去掉页面导航条

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

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

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

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

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

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

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

编程日记 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

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

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

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

Java 标识符（详解）

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

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

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

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

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

Python基础知识点--总结

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

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

水墨江南模型Python入门实践：第一个AI国画生成程序

水墨江南模型Python入门实践：第一个AI国画生成程序你是不是也刷到过那些充满诗意的AI水墨画？烟雨朦胧的江南水乡，寥寥几笔勾勒出的远山，那种独特的意境让人过目不忘。你可能觉得，要做出这样的画，得是懂艺…...

编程新知 2026/3/30 5:44:31

Altium Designer16禁止区域设置避坑指南：为什么你的剪切块总是不生效？

Altium Designer 16禁止区域设置避坑指南：为什么你的剪切块总是不生效？ 在PCB设计过程中，禁止区域(Keep-Out Region)的设置是确保电路板可靠性的重要环节。然而，许多Altium Designer 16用户在实际操作中经常遇到剪切块转换失败的问…...

编程新知 2026/3/30 5:02:03

OpenClaw+GLM-4.7-Flash数据助手：Excel报表自动生成与分析

OpenClawGLM-4.7-Flash数据助手：Excel报表自动生成与分析 1. 为什么需要自动化数据助手作为一位经常与Excel报表打交道的分析师，我每天要花大量时间重复执行数据清洗、格式转换和基础分析。最痛苦的是每月底需要手动合并十几个分公司的销售数据&#…...

编程新知 2026/3/30 4:51:58

163MusicLyrics全能工具：三步搞定音乐歌词高效解决方案

163MusicLyrics全能工具：三步搞定音乐歌词高效解决方案【免费下载链接】163MusicLyrics Windows 云音乐歌词获取【网易云、QQ音乐】项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 163MusicLyrics是一款专注于音乐歌词获取与管理的开源…...

编程新知 2026/3/30 4:05:22