下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:element-ui表单验证无效解决

作者: jackzer     来源: https://www.cnblogs.com/jackzer666/p/11385343.html点击数:2095发布时间: 2020-03-02 11:49:47

标签: 服务器开发web前端渲染视频

Web开发

  表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

  最近在项目中遇到了一个需求,需要动态增减表单元素,同时给新增的表单元素增加校验规则。

  element-ui官网给出了解决方案:点击新增按钮时,向循环渲染的数组中push新的对象,数据驱动视图,通过增加数据的方式来增加新的dom元素;同样的,通过删除循环遍历的数据来达到删除dom的效果。

  但是,校验规则不起作用,即使填写了表单已经提示未填写。在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。但和通常表单不同的是,该表单是动态增减的,对应el-form-item需要绑定的prop值必须带上遍历的索引值index:

  <el-formref="...":model="test">

  <divv-for="(item,index)intest.line":key="index">

  <el-form-item:prop="'line.'+index+'.value1'":rules="{...}">

  <el-inputv-model="item.value1"></el-input>

  </el-form-item>

  <el-form-item:prop="'line.'+index+'.value2'":rules="{...}">

  <el-inputv-model="item.value2"></el-input>

  </el-form-item>

  <div>

  </el-form>

  <script>

  exportdefault{

  data(){

  return{

  test:{

  ...,

  line:[{

  value1:'',

  value2:''

  }]

  }

  }

  }

  }

  </script>

  表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

赞(15)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程