el-input 入力ボックス関連の検証と使用

タイプ type を使用するtext 場合、入力の長さを制限します

typeタイプがtextテキストの場合、maxlength属性を。

<el-form-item  class="el-form-style" prop="form">
  <span class="input-red">*</span>
  高度
  <el-input v-model="form.height"  maxlength="6" type="text" placeholder="请输入">
    <i slot="suffix" style="font-style: normal; margin-right: 10px;">px</i>
  </el-input>
</el-form-item>

タイプ type を使用するnumber場合、入力の長さを制限します

typetypeが used number、つまり数値の場合、maxlength属性は、デフォルトは無効です。以下に示すように、入力時に制限を加えることができます。

<el-form-item  class="el-form-style" prop="form">
  <span class="input-red">*</span>
  宽度
  <el-input v-model="form.width"
    placeholder="请输入"
    size="small" type="number"
    oninput="if(value.length >6) value=value.slice(0,6)"
  >
    <i slot="suffix" style="font-style: normal; margin-right: 10px;">px</i>
  </el-input>
</el-form-item>

入力ボックス挿入ユニット

<el-form-item  class="el-form-style" prop="form">
  <span class="input-red">*</span>
  宽度
  <el-input v-model="form.width" size="small" placeholder="请输入">
    <i slot="suffix" style="font-style: normal; margin-right: 10px;">秒</i>
  </el-input>
</el-form-item>

レンダリング:

入力ボックスには文字と数字のみを入力でき、文字数は制限されています

<el-form-item  class="el-form-style" prop="form">
  <span class="input-red">*</span>
  描述：
  <el-input v-model="form.desc" size="small"
     maxlength="30" 
     show-word-limit
     placeholder="请输入"
     onkeyup="value=value.replace(/[\W]/g, '')"	
  />
</el-form-item>