补充于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);" />
可以用这段代码感受一下
网友评论