动态创建表单并提交

动态创建一个form表单,将参数传递给后端

<button onclick="go()">点击</button>

<script>
  function go() {
    var form = document.createElement("form");
    form.action = "https://abc.com/auth/sign";
    form.method = "post";
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "aa";
    input.value = "bb";
    form.appendChild(input);
    document.body.appendChild(form).submit();
  }
</script>
Element UI是一个基于Vue.js的开源UI组件库,它提供了一套丰富的前端界面解决方案。动态添加表单并实现实时验证必填字段通常涉及到以下几个步骤: 1. 引入Element UI的表单组件:首先,在Vue项目中安装并引入`element-ui`,然后导入你需要的表单组件,如`el-form`, `el-form-item`, 和`el-button`。 ```javascript import { ElForm, ElFormItem } from "element-plus"; ``` 2. 创建一个表单模板:创建一个基础的表单结构,并设置每个必填字段的`required`属性为`true`。 ```html <template> <el-form v-model="form" :inline="true" @submit.prevent="submitForm"> <el-form-item prop="name" label="姓名" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"></el-form-item> <!-- 添加更多必填项... --> <el-form-item prop="email" label="邮箱" :rules="{ required: true, type: 'email', message: '请输入有效的邮箱地址' }"></el-form-item> <el-form-item> <el-button type="primary" @click="addFormItem">新增必填项</el-button> </el-form-item> </el-form> </template> ``` 3. 动态添加表单元素:在JavaScript里,你可以创建一个函数`addFormItem`,当点击按钮时,通过`v-for`循环动态生成新的表单项。 ```javascript data() { return { form: {}, items: [] // 存放动态生成的表单项 }; }, methods: { addFormItem() { this.items.push({ prop: 'field_' + (this.items.length + 1), // 新增字段名,比如 field_1, field_2... label: '新字段', required: true, rules: {} // 根据需要自定义验证规则 }); // 将新生成的项添加到表单中 this.$refs.form.addRule(this.items[this.items.length - 1]); }, submitForm() { if (!this.validateForm()) { console.log('表单有误'); return; } // 提交表单... }, validateForm() { // 使用 Element UI 的 validate 方法,如果所有必填项都有值,则返回 true const valid = this.$refs.form.validate(); return valid; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值