使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat

[Element Warn][Form]model is required for validat

如文末的完整例子:

该提示说的是 form表单需要一个绑定一个 对象(使用:model="editform" 不能使用v-model="editform"),

同时v-model="multipleSelectionStudent" 的multipleSelectionStudent一定一定一定要在editform对象中,

而例子中v-model="multipleSelectionStudent" 的multipleSelectionStudent就不一定在editform对象中,因为此字段,没有做验证.

<el-form :model="editForm" ref="form" label-position="left" label-width="100px">
    <el-row :gutter="24">
        <el-col :span="12">
            <el-form-item label="姓名">
                <el-input v-model="multipleSelectionStudent" placeholder="请选择"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="地区" prop="selectSources" :rules="[
                     { required: true, message: ‘请选择地区‘, trigger: ‘change‘}]">
                <el-cascader v-model="editForm.selectSources"
                             placeholder="请选择"
                             :clearable="true"
                             :options="options.resourceGroup"
                             change-on-select
                             :props="cascaderProp"
                             class="el-cascader-100p"
                ></el-cascader>
            </el-form-item>
        </el-col>
    </el-row>
</el-form>
export default {
      data():{
          return {
               editForm: {
                  selectSources: [],
               },
          }
      }
}

原文地址:https://www.cnblogs.com/yuwenjing0727/p/9676620.html

时间: 2024-08-28 03:35:27

使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat的相关文章

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有: 1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定) 2.el-form rules,model属性绑定,ref标识 自定义表单验证的坑: 一.valid

$(&#39;#itemAddForm&#39;).form(&#39;reset&#39;);重置表单是报错?

$('#itemAddForm').form('reset');重置表单是报错Uncaught TypeError: $(...).reset is not a function 以为是方法错误于是就换了$('#itemAddForm').reset()和$('#itemAddForm').resetForm()依然报错. 后来把重置按钮的type属性换成了submit就OK了,<input type="sbumit" onclick="clearForm()"

Yii框架用ajax提交表单时候报错Bad Request (#400): Unable to verify your data submission.

提交表单报400错误,提示 "您提交的数据无法验证"原来是csrf验证的问题,因为表单是自己写的,在Yii框架中,为了防止csrf攻击,对post的表单数据封装了CSRF令牌验证.解决办法关闭csrf验证 frontend/config/main-local.PHP中 在配置文件中关闭 $config = [ 'components' => [ 'request' => [ // !!! insert a secret key in the following (if it

表单上传图片报错(解决方案):413 Request Entity Too Large

配置nginx中的nginx.conf文件 请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了 如 上传大文件过大 或者 POST数据比较多 处理方法: 在nginx.conf中的http{...}配置中,增加 client_max_body_size的相关设置, 这个值默认是1m,可以增加到8m以增加提高文件大小限制:当然一个设置更大点.

最简单的表单验证

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最简单表单验证</title> 6 <style> 7 form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-sh

jquery实现表单验证

用jquery实现简单的表单验证 HTML代码: 1 <form action="" method="post" id="form-data"> 2 <div id="content"> 3 <div> 4 <label for="username">用户名:</label> 5 <input type="text" na

angular js 表单验证

1 <!doctype html> 2 <html ng-app="myapp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 body{ 8 padding: 50px; 9 font-family: "微软雅黑"; 10 } 11 input{ 12 margi

自己编写jQuery插件 之 表单验证

吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar([email protected]) */ (function ($) { $.fn.checkFor

angularjs 表单验证(不完整版)

针对项目实践表单验证总结: angular 的 form表单验证:form内需要novalidate取消默认验证,用ng自己的验证,form的名字是非常必要的 栗子:以注册为栗子,下面是注册的部分: <form ng-submit='register' name='registerForm' novalidate> <!-- 用户名 --> <div class="form-group" ng-class='{"error":regis