本文目录导读：
我来帮你写一个表单数据构造脚本,这里提供几个不同场景下的实现方案：
基础表单数据构造（JavaScript）
// 构造表单数据的工具函数
class FormDataBuilder {
constructor() {
this.formData = {};
this.rules = {};
}
// 添加字段
addField(name, value, options = {}) {
this.formData[name] = value;
if (options.required || options.type) {
this.rules[name] = options;
}
return this;
}
// 批量添加字段
addFields(fields) {
Object.entries(fields).forEach(([key, value]) => {
if (typeof value === 'object' && value.value !== undefined) {
this.addField(key, value.value, value.options || {});
} else {
this.addField(key, value);
}
});
return this;
}
// 构造最终数据
build() {
return {
data: { ...this.formData },
rules: { ...this.rules },
toFormData: () => this.toFormData(),
toJSON: () => JSON.stringify(this.formData),
validate: () => this.validate()
};
}
// 转换为 FormData 对象（用于文件上传等）
toFormData() {
const fd = new FormData();
Object.entries(this.formData).forEach(([key, value]) => {
if (value instanceof File || value instanceof Blob) {
fd.append(key, value, value.name);
} else if (Array.isArray(value)) {
value.forEach((item, index) => {
fd.append(`${key}[${index}]`, item);
});
} else {
fd.append(key, value);
}
});
return fd;
}
// 简单的数据验证
validate() {
const errors = [];
Object.entries(this.rules).forEach(([field, rule]) => {
const value = this.formData[field];
if (rule.required && !value) {
errors.push(`${field} 是必填字段`);
}
if (rule.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
errors.push(`${field} 格式不正确`);
}
if (rule.type === 'phone' && value && !/^1[3-9]\d{9}$/.test(value)) {
errors.push(`${field} 手机号格式不正确`);
}
if (rule.maxLength && value && value.length > rule.maxLength) {
errors.push(`${field} 长度不能超过 ${rule.maxLength}`);
}
if (rule.minLength && value && value.length < rule.minLength) {
errors.push(`${field} 长度不能少于 ${rule.minLength}`);
}
});
return {
isValid: errors.length === 0,
errors
};
}
}
// 使用示例
const builder = new FormDataBuilder();
// 添加表单字段
builder
.addField('username', '张三', { required: true, minLength: 2, maxLength: 20 })
.addField('email', 'zhangsan@example.com', { required: true, type: 'email' })
.addField('phone', '13800138000', { type: 'phone' })
.addFields({
age: 25,
gender: { value: 'male', options: { required: true } },
avatar: new File([''], 'avatar.jpg', { type: 'image/jpeg' })
});
// 构建数据
const formData = builder.build();
// 获取不同类型的数据
console.log('JSON 数据:', formData.toJSON());
console.log('验证结果:', formData.validate());
// 发送请求
fetch('/api/submit', {
method: 'POST',
body: formData.toFormData() // 支持文件上传
});
动态表单数据构造（支持嵌套）
class AdvancedFormBuilder {
constructor(schema) {
this.schema = schema || {};
this.data = {};
this._initData();
}
_initData() {
// 根据 schema 初始化默认值
Object.entries(this.schema).forEach(([key, config]) => {
this.data[key] = config.default || '';
});
}
// 设置字段值
set(field, value) {
if (field.includes('.')) {
// 支持嵌套路径
const keys = field.split('.');
let current = this.data;
keys.forEach((key, index) => {
if (index === keys.length - 1) {
current[key] = value;
} else {
if (!current[key]) current[key] = {};
current = current[key];
}
});
} else {
this.data[field] = value;
}
return this;
}
// 设置数组字段
setArray(field, items) {
this.data[field] = items;
return this;
}
// 添加数组项
addArrayItem(field, item) {
if (!this.data[field]) {
this.data[field] = [];
}
this.data[field].push(item);
return this;
}
// 生成表单数据
generate() {
return {
data: this.data,
schema: this.schema,
toUrlEncoded: () => this._toUrlEncoded(),
toFormData: () => this._toFormData(),
toXML: () => this._toXML()
};
}
_toUrlEncoded() {
const params = new URLSearchParams();
this._flattenObject(this.data, '', params);
return params.toString();
}
_flattenObject(obj, prefix, params) {
Object.entries(obj).forEach(([key, value]) => {
const fullKey = prefix ? `${prefix}[${key}]` : key;
if (value && typeof value === 'object' && !Array.isArray(value)) {
this._flattenObject(value, fullKey, params);
} else if (Array.isArray(value)) {
value.forEach((item, index) => {
params.append(`${fullKey}[${index}]`, item);
});
} else {
params.append(fullKey, value);
}
});
}
_toFormData() {
const fd = new FormData();
Object.entries(this.data).forEach(([key, value]) => {
if (value instanceof File) {
fd.append(key, value);
} else if (typeof value === 'object') {
fd.append(key, JSON.stringify(value));
} else {
fd.append(key, value);
}
});
return fd;
}
_toXML() {
let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<form>\n';
this._buildXML(this.data, xml, 1);
xml += '</form>';
return xml;
}
_buildXML(obj, xml, indent) {
const space = ' '.repeat(indent);
Object.entries(obj).forEach(([key, value]) => {
if (typeof value === 'object' && !Array.isArray(value)) {
xml += `${space}<${key}>\n`;
this._buildXML(value, xml, indent + 1);
xml += `${space}</${key}>\n`;
} else {
xml += `${space}<${key}>${value}</${key}>\n`;
}
});
return xml;
}
}
// 使用示例
const builder = new AdvancedFormBuilder({
name: { required: true, maxLength: 50 },
contact: {
email: { type: 'email' },
phone: { type: 'phone' }
},
tags: { type: 'array' }
});
builder
.set('name', '测试用户')
.set('contact.email', 'test@example.com')
.setArray('tags', ['tag1', 'tag2'])
.addArrayItem('tags', 'tag3');
const formData = builder.generate();
console.log('URL 编码:', formData.toUrlEncoded());
console.log('原始数据:', formData.data);
测试用表单数据生成器
class TestFormDataGenerator {
constructor() {
this.fieldGenerators = {
string: (options = {}) => {
const chars = 'abcdefghijklmnopqrstuvwxyz';
const length = options.length || 10;
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
},
number: (options = {}) => {
const min = options.min || 0;
const max = options.max || 9999;
return Math.floor(Math.random() * (max - min + 1)) + min;
},
email: () => `${this.fieldGenerators.string({ length: 8 })}@${this.fieldGenerators.string({ length: 5 })}.com`,
phone: () => `1${Array.from({ length: 10 }, () => Math.floor(Math.random() * 10)).join('')}`,
date: (options = {}) => {
const start = options.startDate || '2020-01-01';
const end = options.endDate || '2024-12-31';
const startMs = new Date(start).getTime();
const endMs = new Date(end).getTime();
return new Date(startMs + Math.random() * (endMs - startMs)).toISOString().split('T')[0];
},
boolean: () => Math.random() > 0.5,
file: () => new File(['test content'], `test_${Date.now()}.txt`, { type: 'text/plain' })
};
}
// 根据 schema 生成随机表单数据
generateFromSchema(schema) {
const data = {};
Object.entries(schema).forEach(([field, config]) => {
if (config.type === 'group') {
data[field] = this.generateFromSchema(config.fields);
} else if (config.type === 'array') {
data[field] = Array.from(
{ length: config.count || 3 },
() => this.generateFromSchema(config.itemSchema || {})
);
} else {
const generator = this.fieldGenerators[config.type];
if (generator) {
data[field] = generator(config.options || {});
}
}
});
return data;
}
// 生成多个测试用例
generateTestCases(schema, count = 5) {
return Array.from({ length: count }, (_, index) => ({
case: index + 1,
data: this.generateFromSchema(schema),
timestamp: new Date().toISOString()
}));
}
}
// 使用示例
const generator = new TestFormDataGenerator();
const schema = {
username: { type: 'string', options: { length: 8 } },
age: { type: 'number', options: { min: 18, max: 65 } },
email: { type: 'email' },
phone: { type: 'phone' },
birthDate: { type: 'date' },
isActive: { type: 'boolean' },
avatar: { type: 'file' },
address: {
type: 'group',
fields: {
street: { type: 'string', options: { length: 20 } },
city: { type: 'string', options: { length: 10 } }
}
},
tags: {
type: 'array',
count: 3,
itemSchema: {
name: { type: 'string', options: { length: 5 } }
}
}
};
const testCases = generator.generateTestCases(schema, 3);
console.log('测试用例:', JSON.stringify(testCases, null, 2));
使用建议
- 基础场景：使用第一个简单的
FormDataBuilder - 复杂嵌套：使用
AdvancedFormBuilder - 测试目的：使用
TestFormDataGenerator
这些脚本可以直接在浏览器或 Node.js 环境中使用,支持：
- 字段验证
- 多种输出格式（JSON、FormData、URL编码、XML）
- 文件上传支持
- 随机测试数据生成
- 链式调用
根据你的具体需求选择合适的实现方式。
