时间戳

首页 > 解决方案 > Vue 在多个字段上显示验证文本

javascript - Vue 在多个字段上显示验证文本

问题描述

有两个按钮称为添加和删除。如果用户单击添加，它将为全名添加一个更多输入字段。我validationText用来显示PLEASE ENTER MORE THAN 5 CHARACTERS全名的文本。如果我添加两个字段并在第二个字段中仅插入两个字符，那么它会validationText在两个输入字段中显示为

在此处输入图像描述

有没有办法向validationText包含少于 5 个字符的特定字段显示消息？

看法

<div id="app">
  <div class="work-experiences">

      <div class="form-row" v-for="(minordatabase, index) in minorsDetail" :key="index">

        <div class="col">
          <br>
          <label id="minorHeading">FULL NAME</label>
          <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg" @input="checkValidation"/>
          <p v-show="!validationText" style="color:red;">
           Please enter than 5 characters
          </p>
        </div>

      </div>

    </div>

      <br>

      <div class="form-group">
        <button @click="addExperience" type="button" class="btn btn-info" style="margin-right:1.5%;">Add</button>
        <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button>
      </div>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    minorsDetail: [
     {
       full_name: "",
       date_of_birth: "",
     }
    ],
    validationText: true
  },
  methods: {
    checkValidation(){
        console.log("SAN");
      var minorsDetailLastElement = this.minorsDetail[this.minorsDetail.length-1].full_name.length;
      console.log(minorsDetailLastElement);
        if(minorsDetailLastElement > 2){
        this.validationText = false;
      }
      if(minorsDetailLastElement > 5){
       this.validationText = true;
      }
    },

    addExperience(){
          this.minorsDetail.push({
            full_name: ''
          })

    },

    removeExperience: function(todo){

          var index = this.minorsDetail.indexOf(todo)
          this.minorsDetail.splice(index, 1)
          this.removeMinorFieldFunction();
    },

  }
})

下面是上的代码JSFIDDLE

https://jsfiddle.net/ujjumaki/5mqp1bag/28/

标签： javascriptvue.js

解决方案

所有字段只有一个validationText。所以，如果你为一个字段设置它，它也会出现在另一个字段中。

我建议做这样的事情来显示验证：

<p v-if="minordatabase.full_name.length > 2 && minordatabase.full_name.length < 5" style="color: red;">
  Please enter more than 5 characters
</p>

推荐阅读