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