el-input input box related verification and use

text When the type is used , limit the length of the input

typeWhen the type is texttext, you can directly use maxlengththe attribute to limit the length of the input in the text box.

<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>

numberWhen the type is used , limit the length of the input

typeWhen the type is used number, that is, a number, maxlengththe attribute , and it cannot take effect by default. Restrictions can be made at input time, as shown below.

<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>

input box insertion unit

<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>

Renderings:

The input box can only enter letters and numbers and the number of characters is limited

<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>