首页 前端知识 el-input 输入框相关校验及使用

el-input 输入框相关校验及使用

2024-04-29 11:04:18 前端知识 前端哥 657 328 我要收藏

使用 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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5991.html
标签
评论
发布的文章

AJAX和JSON

2024-05-03 19:05:37

qml 文件中 JSON的使用

2024-05-03 19:05:03

json在线格式化代码

2024-05-03 19:05:01

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!