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

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

news 2025/7/3 16:59:50

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

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/6/18 7:54:42

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...

编程新知 2025/6/21 6:32:50

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/6/29 2:44:15

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/6/24 0:40:13

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/6/20 18:29:18