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;">pxi>
  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;">pxi>
  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>

你可能感兴趣的:(element,css3,html5,前端)