js之input框验证,以及一些Unicode知识

补充于5/23,来源于百度前端IFE的js任务
现在我们要验证登录框里文字的长度

中文字符算两个,英文字符算一个

在浏览器默认下,无论是汉字,还是英文,length属性都是按1算的。

如果要让汉字变成两个字符,就要涉及到Unicode编码知识,再具体大家可以移步阮一峰老师的编码文章

Unicode是统一的编码形式

注意是形式,utf-8只是Unicode的实现方式,也是用的最多的
1)对于单字节的符号,字节的第一位设为0,后面7位为这个符号的unicode码。因此对于英语字母,UTF-8编码和ASCII码是相同的。
2)对于n字节的符号(n>1),第一个字节的前n位都设为1,第n+1位设为0,后面字节的前两位一律设为10。剩下的没有提及的二进制位,全部为这个符号的unicode码。
比如一个32位的汉字,二进制就会这样表达
11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

我们可以用charCodeAt方法来得到字符的十进制编码,来判断是英文还是中文,来进行计算长度,虽然学的时候是16,2进制表达,但用的时候还是10进制方便理解

    var len = (function(){
        var tmp=0;
        for(var i=0;i<input.length;i++){
            //console.log(input[i]); 
            if(input[i].charCodeAt() >0 && input[i].charCodeAt() <255){
                tmp+=1;  //只要在0到255内的,就是英文字符
            }else {
                tmp+=2;
            }
        }
        return tmp;
    })();

为什么是0-255
英文字符在Unicode中是0x00-0xff,常用的是前128,后面是欧洲用的
用[竖式计算] 0xff
第1位: F(15 ) * 16^0= 15
第2位: F (15) * 16^1 = 240
相加得255

另外中文除了16位编码,一些不常用的字符,要用到32个位来编码,使用32bit编码的,只要记住他们的前16bit 一定在 0xD800-0xDBFF 区间, 后16bit 一定在 0xDC00-0xDFFF 区间,中间空出来,就可以让Unicode识别出,原来这是一个32位的不常用汉字。

原文:
今天学习了很简单的一个功能,就是输入框的验证
做的是IT修真院,css技能树的第十一个任务
这是我的邀请链接http://www.jnshu.com/login/1/95597606

一个栗子

在浏览器端就可以进行简单的验证,来保证网页的安全
防止一些人恶意输入<script>之类的标签

直接上检测的代码,是可以即时反馈的检测

第一种方法,利用event事件(事件对象)

<input type="text" name="tel" placeholder="请输入手机号" maxlength="11" onkeypress="keyPress()">

function keyPress() { var event = event || window.event; //IE中是window.event var keyCode = event.keyCode; if ((keyCode >= 48 && keyCode <= 57)) { event.returnValue = true; } else { event.returnValue = false; } }
不过利用keypress或者keydown,在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善
任何方法,DOM 0/2 ,都会给函数传入event事件,大家可以自行console.log输出看一下。

另外还有event.target等方法,等同于this,其他作用尚需探索

第二种方法,html5新属性pattern

``<input type="text" name="tel" placeholder="请输入手机号" pattern="\d+">`
不过在我的浏览器上并没有试验成功。。留待后面验证

第三种方法,onchange

之前用的是onkeydown或者onkeypress
onchange这种方法检测input输入框的value有一个缺点,就是要失去焦点,或者按一次回车才可以触发?

第四种方法,目前最完美解决方案,oninput

完美检测输入框变化,不过不会检测到用脚本改变的input的value
<input type="text" oninput="console.log(this.value);" />
可以用这段代码感受一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 这个写的最好 http://blog.csdn.net/x_iya/article/details/5313011...
    三藏君阅读 978评论 0 1
  • 很多人应该听过一句话, 一个人最大的敌人是自己,战胜了自己,其他的困难也就不算什么,但是很多人可能不知道的是,我们...
    沫小败阅读 210评论 0 0
  • 今天是2017年1月1日,昨天被各个卫视的跨年演唱会淹没了,听到几位老歌手的演唱发现我还是最喜欢他们,是不是暴露年...
    我是一个树洞阅读 104评论 0 1
  • 梅姑娘:见字如面。 看到你的回信, 正在外出的路上。这天似乎突然阴冷了下来,变成黑白胶片的色调。风吹得有些急,微冷...
    2020号阅读 786评论 51 50
  • 凌晨四点,打开一瓶冰啤酒,不是因为好酒,而是因为心事。 这里很好,无人知晓,也许有人知道反而不能直白。矫情! 人总...
    杨知行阅读 265评论 0 0