javascript表单之 —— 文本框输入验证详细解读

      在前端开发中经常会遇到限制文本框输入特定的字符类型，或者过滤某些字符。而HTML提供的文本框本身没有验证的手段和功能，因此必须使用JS来完成这项功能，完善此项功能还得综合运用事件和DOM接口。废话不多说了，看看如何让普通的文本框变成完美的输入功能控件。

      一、屏蔽字符

　　过滤掉某些不需要出现的字符。例如：手机号码不能包含非数字字符，邮政编码也是如此。响应文本框输入字符操作的是keypress事件，因此，可以通过阻止这个事件的默认行为来屏蔽此类字符的输入。下列代码为只允许用户输入数值：（本文重思路轻代码，都是用DOM0级的事件方式，如需兼容各浏览器的实现代码，请另外联系） 　　

element.onkeypress = function(){
    var event = window.event || event;
    var target = event.target || event.srcElement;
    var charCode = typeof event.charCode == "number" ? event.charCode : event.keyCode;
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
    }
};

　　在上面例子中，实现了跨浏览器取得字符编码，然后使用String.fromCharCode()将字符编码转换成字符串，再使用正则/\d/来测试该字符串，从而确定用户输入的是不是数字。如果不是数字，则会阻止事件的默认行为发生，实现的效果就是忽略所有的非数字输入。

　　当然，如今各浏览器的实现情况不一，完全按照标准来的根本不存在，也就难免有些浏览器对一些重要的功能键（退格、删除、向上、下等功能键）也出发keypress事件。这样的话，过滤非数字字符也殃及池鱼了。幸运的是，可以通过增加判断条件，排除这些重要的功能键。FF中，所有的非字符键触发的keypress事件对应的字符编码（charCode）为0，而Safari3-版本，对应的字符编码为8，因此上述代码添加了charCode > 9的排除条件，这样我们的事件处理函数就能使用绝大部分浏览器了。

　　到了这里，大伙一定认为考虑周全了，可是别忘了，在操作文本框的时候，我们还经常用到复制、粘贴、剪切功能，也就用到了组合功能键Ctrl，上述代码并没有将此功能键排除，因而，我们还得添加一个排除条件：!event.ctrlKey，现在基本上确保过滤功能正常了。

　　回头看看实现过滤的过程，我们考虑到了各式各样的复杂情况，然后一步步改善过滤功能。因此，开发过程中千万不要放弃去完善一件完美的产品，如此才有提高！当我们把每项功能每样组件每个模块每样产品都当成一件完美的艺术品来完善，做到精工细琢，成为这个领域的顶尖人物只是时间问题。

　　二、预防剪贴板

　　文本框不只可以从键盘输入字符，还可以通过复制粘贴输入字符，防止剪贴板输入想要过滤的字符也是考虑的范畴之一。

　　要控制粘贴到文本框的字符为数字，只须在文本框的paste事件添加事件处理函数对剪贴板的文字进行验证。如果验证通过，则允许进行粘贴，否则取消粘贴操作。虽然目前五大浏览器都支持复制粘贴事件，但是却不能全部正常地访问剪贴板，例如：Firefox就不支持clipboardData对象，因而在FF浏览器中不能正常使用下面代码。　　

element.onpaste = function(event){
    event = event || window.event;
    var clipboardData = event.clipboardData || window.clipboardData;
    var text = clipboardData.getData("text") || clipboardData.getData("text/plain");
    /^\d*$/.test(text) || (event.perventDefault ? event.preventDefault() : (event.returnValue = false));
};　

　　上述代码中，clipboardData对象有三个方法：getData()方法读取剪贴板的字符数据，setData()设置剪贴板的数据，clearData()清楚剪贴板。这这里使用getData()方法把剪贴板的字符读取到变量text，然后用正则表达式对其进行验证测试。若符合规范，则正常粘贴剪贴板里字符，否则取消粘贴。　

　　由于并非所有的浏览器都支持访问剪贴板，所以更加简单的办法就屏蔽复制粘贴的功能。在支持copy、cut和paste事件的浏览器中（IE、Safari、Chrome和Firefox 3及更高版本），阻止事件的默认行为，更加简单的办法就屏蔽ctrl按键。在Opera中，则还需要阻止文本框中显示上下文菜单（context menu），也就是阻止右键菜单弹出，方法为：使用非DOM规范的事件oncontextmenu，阻止其默认行为就不会弹出了。