使用ElementUI的@input,@change,@blur,@focus进行校验文本框的长度，提示还可以输入多少字

Posted 2022-05-18 指导毕业设计Monkey

文章目录

• • • 1. 需要校验的文本框加上@input
    • 2.校验的methods:

1. 需要校验的文本框加上@input

input是文本的内容变化就会触发，可以直接输出你的变化的文本

 <!-- 优选标记弹框 -->
    <el-dialog v-dialogDrag title="优选标记" :visible.sync="starFlag" class="dialog" width="30%">
      <el-form :model="dataForm" label-width="100px">
        <el-form-item label="优选类型">
          <el-select v-model="dataForm.startType" default-first-option filterable allow-create clearable
            placeholder="请选择" style="width: 40%;">
            <el-option v-for="(item, index) in startTypes" :key="index" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="dataForm.starRemark" type="textarea" placeholder="请输入" clearable style="width: 80%;"
          @input = "passInput"
          >
          
        
          </el-input>
       
         
        </el-form-item>
            <p style="margin-left:66px;font-size:9px;text-align:center"> 还可以输入<strong style="color:red">numRemark</strong>个字 </p>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="danger" @click="starBtn" size="medium" plain>确 定</el-button>
        <el-button plain @click="starCancel" size="medium">取 消</el-button>
      </div>
    </el-dialog>

2.校验的methods:

passInput(value)
  console.log(value,"value"); 
  this.numRemark = 400 - value.length;
  if(this.numRemark < 0)
    this.numRemark = 0;
  
  if(value.length > 400)
    
    this.dataForm.starRemark = this.dataForm.starRemark.substring(0,400);
    this.$message(
            message: "输入的备注不可以大于400字",
            type: "error",
            showClose: true,
          );
   return;
  



,