为了实现一个管理系统,少不了用户的输入作为系统的内容。一旦涉及输入就需要对用户的输入内容进行判断,避免错误,无效,有害数据内容进入系统。
今天通过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