循环表单数据验证

<!-- 循环数据表单验证 -->
        <div v-for="(item,index) in ruleForm.circulation" :key="index" style="width:933px">
          <el-form-item
            label="姓名"
            :prop="`circulation.`+index+‘.name‘"
            :rules="[
      { pattern:/^[\u4e00-\u9fa5]+$/, message: ‘姓名必须是汉字‘, trigger: [‘blur‘, ‘change‘] }
    ]"
          >
            <el-input v-model="item.name" style="width:180px;"></el-input>
          </el-form-item>
          <el-form-item
            label="关系"
            :prop="`circulation.`+index+‘.relation‘"
            style="padding-left:60px"
          >
            <el-input v-model="item.relation" style="width:180px;"></el-input>
          </el-form-item>
          <el-form-item label="民族" :prop="`circulation.`+index+‘.nation‘" style="padding-left:60px">
            <el-select v-model="item.nation" placeholder style="width:180px;">
              <el-option
                v-for="item in allMenu.nation"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="政治面貌" :prop="`circulation.`+index+‘.political‘">
            <el-select v-model="item.political" placeholder="政治面貌" style="width:180px;">
              <el-option
                v-for="item in allMenu.political"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="联系电话"
            :prop="`circulation.`+index+‘.phone‘"
            :rules="[
      { pattern:/^1[34578]\d{9}$/, message: ‘手机号格式有误‘, trigger: [‘blur‘, ‘change‘] }
    ]"
            style="padding-left:59px"
          >
            <el-input v-model="item.phone" style="width:180px;"></el-input>
          </el-form-item>
          <el-form-item label="工作地址" style="padding-left:59px">
            <el-input v-model="item.workAddress" style="width:180px;"></el-input>
          </el-form-item>
        </div>
        <div
          style="width:885px;height:42px;text-align:center;border:1px dashed #e4e4e4;line-height:42px;color:#999999;cursor: pointer;"
          @click="stu_member"
        >
          <i class="el-icon-plus"></i>
          添加成员
        </div>

  

        // 家庭成员

       ruleForm: {
         // 家庭成员
        circulation: [
          {
            name: "", // 姓名
            relation: "", // 关系
            nation: "", // 民族
            political: "", // 政治面貌
            phone: "", // 联系电话
            workAddress: "" // 工作地址
          }
        ],     

    }

  

原文地址:https://www.cnblogs.com/js-liqian/p/11806985.html

时间: 2024-10-26 07:26:05

循环表单数据验证的相关文章

jquery表单数据验证扩展方法

/** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = true; $(this).find("[isvalid=yes]").each(function () { var checkexpession = $(this).attr("checkexpession"); var errormsg = $(this).attr(&q

SpringMVC4+thymeleaf3的一个简单实例(篇四:form表单数据验证)

关于表单数据验证有很多中方法,这里我仅介绍JSR303注解验证.JSR303仅仅是一个规范,这里我们要用到它的一个实现:hibernate-validator. 注意在spring的配置文件spring-mvc.xml中要有这句代码:<mvc:annotation-driven/>,有了它,spring框架会自动加载classpath的jsr303的实现. 开工之前,我们需要引入以下lib文件到WEB-INF/lib,并添加到classpath:validation-api-1.1.0.Fin

ShopNC学习笔记三:表单数据验证

数据安全是程序开发中至关重要一点,特别是对商城程序而言,一般对表单数据验证都是采用前端JS与后端PHP验证相结合的方式,ShopNC商城系统在表单数据验证上也是如此, ShopNC系统的后台PHP验证分为两部分:控制器层验证和框架底层验证,Validate验证类的作用就是完成在控制器里的验证. 下面是登录时的一段使用Validate类验证程序: if (chksubmit()){ $obj_validate = new Validate(); $obj_validate->validatepar

Struts2表单数据验证

(一) 编程式验证 对所有方法进行验证 (1) 创建一个类继承ActionSupport 原因: 因为ActionSupport类实现了Validateable接口 查看validateable接口, 发现ActionSupport对该方法做了空实现 (2) 在创建的类中覆写AcitonSupport中的valudate()方法 public class UserAction2 extends ActionSupport implements ModelDriven<User> { priva

HTML表单 在提交之前 验证表单数字合法性

function checkform(){ if(!isNumeric($('.apply_money').val())){ alert("必须是数字"); return false; } var num = parseInt($('.apply_money').val()); if(num<=0){ alert("请输入大于0的数"); return false; } return true; } <form action="?action=

常用表单数据的验证方法

1.姓名验证 ereg("[a-zA-Z_]",$_POST['username']) 2.日期验证 ereg("[0-9]{4}-[0-9]{2}-[0-9]{2}",$_POST['birthday']) 3.E-mail地址验证 ereg("^[a-zA-Z0-9_.]+@([a-zA-Z0-9_]+.)+[a-zA-Z]{2,3}$",$_POST['email']) 常用表单数据的验证方法

easyui提交表单数据的时候如何防止二次提交

在前端提交数据的时候有时候可能会由于网络延迟等原因,我们在等待的时候会多次点击保存按钮,这可能会导致我们一次输入的数据多次提交,导致数据重复.最近在做项目的时候碰到了这个问题,先说一点,这个问题的解决方案有很多种,有的在前端解决,有的方案在后端解决,个人觉得能够在前段解决的最好在前段就解决,而且拿java来说,如果在后端解决,在高并发的情况下还要考虑线程安全的问题.最近接触的项目的前端是easyui,在此把解决方案做下记录. 不论是easyui还是别的框架,总体的一个思路是:当我们点击保存按钮之

jsp提交表单数据乱码,内置对象,以及过滤器

jsp提交表单数据乱码解决方案 通过form表单给服务器提交数据的时候,如果提交的是中文数据,那么可能会出现乱码,如果表单的请求方式是post请求,那么可以使用如下方案解决乱码: 在调用getParameter()之前,设置请求对象request的编码方式. <% request.setCharacterEncoding("utf-8");%> 002.如果是通过get方式提交的form,两种处理乱码方案: 01.通过new String(str.getBytes(“iso

easyui怎么将前台表单数据传递给后台?

前几天一直在研究easyui,当把前台表单数据传递给后台时,出现了很多问题,研究了好长时间原来可以使用jquery ajax中的serialize()序列化将前台表单数据传递给后台,下面是 jQuery 代码: $("#results").append( "<tt>" + $("form").serialize() + "</tt>" ); 项目代码如下: 1 //添加事件 2 $(function()