element ui 巢狀物件的驗證問題

阿新 • • 發佈：2020-08-07

1、正常例子

　　form裡面只有一層是沒有問題

        ruleForm: {
          name:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

假如是下面這種

        ruleForm: {
            names:{
                name: 
''
            },
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

如果你的prop還是寫name，這樣就會出現一個就算你input中輸入了值，也會提示校驗不通過，如下圖

解決辦法：

1、prop中邪names.name

2、校驗中name欄位也需要改成和prop對應

例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.names.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
      <el-option label="區域一" value="shanghai"></el-option>
      <el-option label="區域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動時間" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即時配送" prop="delivery">
    <el-switch 
 v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動性質" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場地免費"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即建立</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new 
 Vue({
      el: '#app',
    data() {
      return {
        ruleForm: {
            names:{
                name:''
            },
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          'names.name': [
            { required: true, message: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '請選擇活動區域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '請選擇活動資源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '請填寫活動形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods:{
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
    })
  </script>
</html>

View Code

element ui 巢狀物件的驗證問題

1、正常例子　　form裡面只有一層是沒有問題 ruleForm: { name:\'\', region: \'\', date1: \'\',

探索ES-物件和巢狀物件（三）

前文回顧上篇文章寫了探索ES-入門Kibana（二）,算是基本上講完了ElasticSearch和Kibana的安裝和基本的概念。今天來正式講一講一些ElasticSearch在使用中會遇到的問題和解決問題的方式方法。

通過xxx.xxx.xxx字串來獲取巢狀物件中的某個屬性值；函式柯利化

。 // 用字串路徑來訪問物件的成員（思路） function getValueByPath( obj,path ){ let paths = path.split(\".\");//[xxx,yyy,zzz,...]

element-ui的表單驗證配合其他元件使用（wangEditor），顯示出element表單驗證的必填小紅點

在使用element-ui開發的時候，總感覺element-ui的元件不夠用，這個時候總會需要配合其他的單獨的元件來使用。這一次我就用到了富文字，然而element-ui中並沒有富文字元件，而且是用在表單中，需要進行表單驗證（就是

vue使用element-ui實現表單驗證

本文例項為大家分享了vue使用element-ui實現表單驗證的具體程式碼，供大家參考，具體內容如下

Vue element-ui form表單驗證 input只允許輸入保留兩位小數的數字

技術標籤：element-uiJavaScriptVue 需求：只允許使用者輸入保留兩位小數的單價，且加上小數點不超過10個字元

js獲取巢狀陣列,巢狀物件的值

2021-1-12 11:55:14 星期二原因: 如果陣列或物件是多維的, 嵌套了很多層, 不想用多箇中括號去取值, 因為需要些大量的中括號, 引號, 拼接符, 不太直觀

@Validated 巢狀物件校驗

技術標籤：Java 實體物件A和B 物件A巢狀物件B，在A物件需要校驗註解加入@Valid

複雜JSON字串轉換為Java巢狀物件的實現

目錄背景方法預備工作構建物件模型使用jackson 庫解析使用GSON解析不含列表的巢狀物件背景

Element-UI 中使用rules驗證金額數字

data中定義驗證規則：var checkCount = function (rule, val, callback) { if (!val) { return callback(new Error(\"數量不能為空\"));

element-ui表單想驗證一個範圍內的數字，type="number"如何配合min和max及非必填項驗證

element-ui表單想驗證一個範圍內的數字，type=\"number\"如何配合min和max及非必填項驗證https://segmentfault.com/q/1010000016549539

解決vue+ element ui 表單驗證有值但驗證失敗問題

一.如圖：有值但是驗證失敗二. <el-form :model=\"form\" :rules=\"rules\"> <el-form-item label=\"資料模板\" prop=\"template\" >

vue-element-ui下拉多選驗證問題

最近做專案時，發現剛開啟彈框就出現了下拉多選的驗證，如下圖：經過網上搜索，找到了兩種解決方案

使用element-ui +Vue 解決 table 裡包含表單驗證的問題

應用場景：在實際使用中經常會遇到需要在Form表單中使用table表格進行表單提交，同時又需要對table的欄位進行校驗，效果如圖所示：

element ui中動態新增的表單進行驗證

專案中有一項表單是需要動態新增的，但是動態新增的表單，驗證規則也需要動態新增。

element-ui和vue表單(對話方塊)驗證提示語(殘留)清除操作

問題是這樣的：如果一個頁面有多個按鈕開啟相同的element-ui的Dialog對話方塊，那麼如果第一個點選\"順序\"按鈕出現紅色驗證提示語後，再點選“取消”，或者點選頁面空白處此對話方塊消失，而後再點選同一個“順序

element-ui 表單驗證注意事項

1. :rules 是否寫錯 2. prop、v-model的位置要注意寫正確 3. 在data填寫規則時也要注意 required是否書寫正確

element ui實現form驗證起始時間不能大於結束時間

<el-form-item label=\"開始時間\" :label-width=\"formLabelWidth\" prop=\"startTime\"> 　　<el-date-picker v-model=\"form.startTime\" type=\"datetime\" format=\'yyyy-MM-dd HH:mm\' value-format

解決VUE專案使用Element-ui 下拉元件的驗證失效問題

問題描述：在使用Element-ui元件做專案開發時候有可能會使用下拉框元件,如果下拉框元件的option選項是使用v-if指令遍歷的,

成功解決：vue element-ui form rules 非空驗證不起效

技術標籤：技術棧-語言-大前端vuerulesvalidate 文章目錄報錯全稱程式碼疑似產生的原因彎路、坑分析解決方案領悟關於

element ui 巢狀物件的驗證問題

相關推薦