JavaScript实现字符串长度校验:中文字符计为2,英文数字计为1

作者:纸飞机时间:2026-10-30 11:31:29浏览:643

本文介绍一种在JavaScript中计算字符串长度的方法,旨在解决因数据库字段长度限制导致的提交失败问题。该算法核心在于区分字符类型:将汉字视为两个字符长度,而字母和数字视为一个字符长度,从而更准确地匹配后端存储限制。

JavaScript字符串长度校验方案

本文提供一段JavaScript代码,用于判断输入字符串的长度。该实现遵循特定规则:在计算长度时,中文字符按两个字符计算,而英文字母和数字则按一个字符计算。

在文本输入场景中,若数据库表字段存在长度限制,直接提交可能导致失败。为此,采用此方法在前端进行验证,可有效避免此类问题。

具体实现代码如下:


<html>
<head>
  <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title>
  <style type="text/css">
    .pbt {
      margin-bottom: 10px;
    }

    .ie6 .pbt .ftid a, .ie7 .pbt .ftid a {
      margin-top: 1px;
    }

    .cl:after {
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
    }
  </style>
  <script type="text/javascript">
    //获取字符串长度(汉字算两个字符,字母数字算一个)
    function getByteLen(val) {
      var len = 0;
      for (var i = 0; i < val.length; i++) {
        var a = val.charAt(i);
        if (a.match(/[^\x00-\xff]/ig) != null) {
          len += 2;
        }
        else {
          len += 1;
        }
      }
      return len;
    }
    // 只要键盘一抬起就验证编辑框中的文字长度,最大字符长度可以根据需要设定
    function checkLength(obj) {
      var maxChars = 80;//最多字符数   
      var curr = maxChars - getByteLen(obj.value);
      if (curr > 0) {
        document.getElementById("checklen").innerHTML = curr.toString();
      } else {
        document.getElementById("checklen").innerHTML = '0';
        document.getElementById("subject").readOnly = true;
      }
    }
  </script>
</head>
<body>
  <div class="pbt cl">
    <textarea id="subject" maxlength="80" onkeyup="checkLength(this)" accesskey="1" tabindex="11"></textarea>
    <span id="subjectchk">还可输入
    <strong id="checklen" style="color: #FF0000">80</strong>
      个字符
    </span>
    <span id="postNameRule" class="spn_flag_1" style="display: none"></span>
  </div>
</body>
</html>

上述内容即为关于JS判断输入字符串长度的完整示例,其中汉字计为两字符、字母数字计为一字符。希望此方案能为读者提供有价值的参考,并欢迎继续支持本站。

作者最新文章