使用js自制输入框验证

为了实现一个管理系统，少不了用户的输入作为系统的内容。一旦涉及输入就需要对用户的输入内容进行判断，避免错误，无效，有害数据内容进入系统。

今天通过javascript对页面的输入框进行校验，主要思路是通过正则表达式对输入内容进行校验，并结合上一篇博客《自制右下角弹窗》http://blog.csdn.net/u010115177/article/details/44526279给用户友好提示。

为了降低前端代码的耦合性，我把校验相关的内容独立成一个js文件ipt_validate.js:

var v_type = {
	integer : /^\d+$/,
	float : /^\d+(\.\d+)?$/,
	Chinese : /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$ /,
	char_digit : /^[A-Za-z0-9]+$/,
	phone_void : /(^1\d{10}$)|(^$)/, //可为空
	password:/^[\w|\W]{3,18}$/
};
// http://colbybobo.iteye.com/blog/1769993
$(document).ready(function() {
	$(".validate").on("blur", function() {
		var regex;
		if ($(this).hasClass("integer")) {
			regex = v_type.integer;
		} else if ($(this).hasClass("float")) {
			regex = v_type.float;
		} else if ($(this).hasClass("Chinese")) {
			regex = v_type.Chinese;
		} else if ($(this).hasClass("char_digit")) {
			regex = v_type.char_digit;
		} else if ($(this).hasClass("phone_void")) {
			regex = v_type.phone_void;
		}
		else if ($(this).hasClass("password")) {
			regex = v_type.password;
		}
		
		if(typeof(regex) != "undefined" ){
			var $node = $(this);
			var value = $node.val();
			if(regex.test(value)){
				//正确
				 $node.css("background-color","#FFF");
			}
			else{
				if(	$("#tipbox").length>0){
					showTips("警告","输入有误！",3000);
				}
				else{
					alert("输入有误！");
				}
				twinkle($node,3);//闪烁3次
				
			}
		}
	});
});
function twinkle ($ipt_node,times){
	error($ipt_node,3);
}
function normal($ipt_node,times)
{
	$ipt_node.css("background-color","#FFF");
    if(times<0)
    {
        return;
    }
    times=times-1;
    setTimeout(function(){
    	error($ipt_node,times);
    },500);
}
function error($ipt_node,times)
{
	$ipt_node.css("background-color","#F6CECE");
    times=times-1;
    setTimeout(function(){
    	normal($ipt_node,times);
    },500);
}

页面输入框如果需要进行校验，只需要引入这一个js文件：

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript"  src=" ./js/ipt_validate.js" ></script>
<script type="text/javascript"  src=" ./js/tipmess.js" ></script>

并在对应的输入标签中添加class属性：

<input type="text" class="input validate char_digit" id="username" name="staff.Loginid" title="由字母、数字组成的登录名">

其中class 属性值validate 标志需要校验，而后面的校验内心说明内容对应的正则表达式，在js文件中v_type中定义。

到此已经完成！

以下是我参考的网站：

js正则对象

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

输入框背景闪烁提示

http://www.oschina.net/code/snippet_124007_7301

jquery判断节点存在

http://www.cnblogs.com/xiangdingdingVictory/archive/2011/01/04/1925302.html

正则表达式相关

http://blog.csdn.net/zaifendou/article/details/5746988

http://www.jb51.net/article/4976.htm

http://www.jb51.net/article/43190.htm

http://blog.csdn.net/flm_0722/article/details/6292938

http://colbybobo.iteye.com/blog/1769993

http://www.cnblogs.com/jihua/archive/2012/09/28/yanzheng.html

http://www.cnblogs.com/zfc2201/archive/2012/12/18/2824107.html

http://www.jb51.net/article/20719.htm