JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)


Posted in Javascript onAugust 02, 2016

js判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证。

废话不多说上代码:

<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判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
基于Vue.js实现数字拼图游戏
Aug 02 #Javascript
js 获取范围内的随机数实例代码
Aug 02 #Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 #Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 #Javascript
基于jQuery实现表格的查看修改删除
Aug 01 #Javascript
jQuery自制提示框tooltip改进版
Aug 01 #Javascript
Three.js学习之文字形状及自定义形状
Aug 01 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
numpy中的高维数组转置实例
2018/04/17 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
美德少年事迹材料
2014/01/23 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
祝寿主持词
2015/07/02 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS