js vue input textarea 限制每行输入字数，限制输入行数

最新推荐文章于 2025-04-02 17:22:40 发布

战国墨竹

最新推荐文章于 2025-04-02 17:22:40 发布

阅读量4.2k

点赞数 3

分类专栏： js，jquery 正则文章标签：正则表达式 javascript vue.js

本文链接：https://blog.csdn.net/xhanguomzhu/article/details/108747038

版权

js，jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

正则

3 篇文章

订阅专栏

本文介绍了一种使用正则表达式进行多行文本输入验证的方法，确保每行字符数量符合预设限制，并通过实例展示了如何在前端实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-input type="textarea"  v-model="xxx" :rows="3" maxlength="33" :show-word-limit="true" @input="((val,name,rowNum,colNum)=>{handleTextarea(val,'xxx',10,3)})" placeholder="请输入xxx"></el-input>


/**
 * @description    校验多行文本验证
 * @param val      输入值
 * @param name     字段名称
 * @param rowNum   每行字符个数
 * @param colNum   列数
 */
handleTextarea(val,name,rowNum,colNum){
    console.log(val)
    console.log(name)
    //正则匹配每行字数
    let reg=new RegExp("(.{"+rowNum+"})","g");
    //先除回车换行符的字符串，不去除影响字符个数计算
    let result = val.replace(/[\r\n]/g,'').replace(reg, "$1\n");
    //获取colNum行
    let arr = result.split("\n").slice(0,colNum);
    if(name == "xxx"){
      this.xxx = arr.join("\n");
    }
}