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 时，限制输入的长度

使用 type 类型为 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>