jquery 打包的表单验证
由于本人刚接触jquery觉得其非常强大，于是兴趣来了就写了一个表单验证的js
什么都不说了直接上代码
js代码：
Utils = { // 定义作用越
info : "Made by Ousui",
version : "0.0.0.1"
};
Utils.checkInput = {
IdValue : null, // 要检查控件的ID属性的值
nameValue : null, // 要坚持控件的name属性的值
color : null, // 若不符合规则需对不符合规则的控件加颜色标志
colorName : null, // 颜色的名字，主要用于提供对用户进行提示。
containsWith : null, // -1:表示以id,name开头的，0表示包含，1以结尾，2表示等于
isFor : null, // 是否需要循环验证 true or false;
isMust : null, // 是否必填
config : function(config) {
var obj = new Object(this);
obj.IdValue = config.IdValue;
obj.nameValue = config.nameValue;
obj.color = config.color;
obj.colorName = config.colorName;
obj.containsWith = config.containsWith;
obj.isFor = config.isFor;
obj.isMust = config.isMust;
return obj;
},
/**
* 检查身份证
*
* @return {}
*/
checkIdCard : function() {
var testValue = "";
var IdCard1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; // 15位
var IdCard2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/; // 18位
var $obj = null;
var b = true;
$obj = this.getObjectBycontainsWith();
b = this.checkAndSetColorMethodtow($obj, IdCard2);
return b;
},
/**
* 检查是不是中文 return true or false
*/
checkChinese : function() {
var $obj = null;
var b = true;
var $objThis = null;
var testValue = /[^\u4e00-\u9fa5]/;
$obj = this.getObjectBycontainsWith();
b = this.checkAndSetColorMethodnoe($obj, testValue);
return b;
},
/**
* email验证
*
* @return {}
*/
checkEmail : function() {
var $obj = null;
var b = true;
var objThis = null;
var testValue = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
$obj = this.getObjectBycontainsWith();
b = this.checkAndSetColorMethodtow($obj, testValue);
return b;
},
/**
* 电话号码验证支持手机，座机
*/
checkPhone : function() {
var $obj = null;
var b = true;
var $objThis = null;
var testValue = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
$obj = this.getObjectBycontainsWith();
b = this.checkAndSetColorMethodtow($obj, testValue);
return b;
},
/**
* 根据正则表达式来判断 false是匹配对的 true 匹配不对
*
* @param {}
* obj
* @param {}
* testValue
*/
checkAndSetColorMethodnoe : function(obj, testValue) {
var b = true;
var color = this.color; //因为 在循环里面用this.color 你会发现的不到 因为循环里面的this 是指遍历的对象 而不是当前类
var isMust = this.isMust
if (this.isFor) {
$.each(obj,function(i,val) {
i++;
var checkValue = jQuery(this).attr("value");
if (isMust) {
if (checkValue == "") {
jQuery(this).css("background-color", color);
jQuery(this).bind('keydown', function() {
jQuery(this).css("color", "");
jQuery(this).css("background-color", "");
});
b = false;
} else {
if (testValue.test(checkValue)) { // 不匹配
jQuery(this).css("color", color);
jQuery(this).bind('keydown', function() {
jQuery(this).css("color", "");
jQuery(this).css("background-color",
"");
});
b = false;
}
}
} else {
if (checkValue != "") {
if (testValue.test(checkValue)) { // 不匹配
jQuery(this).css("color", color);
jQuery(this).bind('keydown', function() {
jQuery(this).css("color", "");
jQuery(this).css("background-color",
"");
});
b = false;
}
}
}
});
} else {
var checkValue = $(obj).attr("value");
if (this.isMust) { //这里因为没有循环所以就是类
if (checkValue == "") {
$(obj).css("background-color", this.color);
$(obj).bind('keydown', function() {
$(obj).css("color", "");
$(obj).css("background-color", "");
});
b = false;
} else {
if (testValue.test(checkValue)) { // 不匹配
$(obj).css("color", this.color);
$(obj).bind('keydown', function() {
$(obj).css("color", "");
$(obj).css("background-color", "");
});
b = false;
}
}
} else {
if (checkValue != "") {
if (testValue.test(checkValue)) { // 不匹配
$(obj).css("color", this.color);
$(obj).bind('keydown', function() {
$(obj).css("color", "");
$(obj).css("background-color", "");
});
b = false;
}
}
}
}
return b;
},
/**
* 根据正则表达式来判断 true是匹配对的 false 匹配不对
*
* @param {}
* obj
* @param {}
* testValue
*/
checkAndSetColorMethodtow : function(obj, testValue) {
var b = true;
var color = this.color; //因为 在循环里面用this.color 你会发现的不到 因为循环里面的this 是指遍历的对象 而不是当前类
var isMust = this.isMust;
if (this.isFor) {
$.each(obj,function(i,val) {
i++;
var checkValue = jQuery(this).attr("value");
if (isMust) {
if (checkValue == "") {
jQuery(this).css("background-color", color);
jQuery(this).bind('keydown', function() {
jQuery(this).css("color", "");
jQuery(this).css("background-color", "");
});
b = false;
} else {
if (!testValue.test(checkValue)) { // 不匹配
jQuery(this).css("color", color);
jQuery(this).bind('keydown', function() {
jQuery(this).css("color", "");
jQuery(this).css("background-color",
"");
});
b = false;
}
}
} else {
if (checkValue != "") {
if (!testValue.test(checkValue)) { // 不匹配
jQuery(this).css("color", color);
jQuery(this).bind('keydown', function() {
jQuery(this).css("color", "");
jQuery(this).css("background-color",
"");
});
b = false;
}
}
}
});
} else {
var checkValue = $(obj).attr("value");
if (this.isMust) { //这里因为没有循环所以就是类
if (checkValue == "") {
$(obj).css("background-color", this.color);
$(obj).bind('keydown', function() {
$(obj).css("color", "");
$(obj).css("background-color", "");
});
b = false;
} else {
if (!testValue.test(checkValue)) { // 不匹配
$(obj).css("color", this.color);
$(obj).bind('keydown', function() {
$(obj).css("color", "");
$(obj).css("background-color", "");
});
b = false;
}
}
} else {
if (checkValue != "") {
if (!testValue.test(checkValue)) { // 不匹配
$(obj).css("color", this.color);
$(obj).bind('keydown', function() {
$(obj).css("color", "");
$(obj).css("background-color", "");
});
b = false;
}
}
}
}
return b;
},
getObjectBycontainsWith:function(){
var $obj=null;
if (this.containsWith == "-1") // 以nameValue开头
$obj = $("input[name^='" + this.nameValue + "']");
if (this.containsWith == "-0") // 以nameValue结尾
$obj = $("input[name*='" + this.nameValue + "']");
if (this.containsWith == "1") // 以包含nameValue
$obj = $("input[name$='" + this.nameValue + "']");
if (this.containsWith == "2") // 以包含nameValue
$obj = $("input[name='" + this.nameValue + "']");
return $obj;
}
}
测试例子
function check(){
var config = Utils.checkInput.config({
nameValue:'email',
color:'red',
containsWith:'-1',
isFor:true,
isMust:true
});
if(config.checkEmail())
alert("email正确");
else
alert("email错误");
var config2 = Utils.checkInput.config({
nameValue:'chinese',
color:'#0088A8',
containsWith:'-1',
isFor:true,
isMust:true
});
if(config.checkChinese())
alert("中文正确");
else
alert("中文错误");
var config2 = Utils.checkInput.config({
nameValue:'idcard',
color:'#FF00FF',
containsWith:'-1',
isFor:true,
isMust:true
});
if(config.checkIdCard())
alert("身份证正确");
else
alert("身份证错误");
}
</script>
</HEAD>
<BODY >
<table>
<tr>
<td>
</td>
<td>
中文名字
</td>
<td>
身份证号
</td>
</tr>
<tr>
<td>
<input type="text" name="email" value="">
</td>
<td>
<input type="text" name="chinese" value="">
</td>
<td>
<input type="text" name="idcard" value="">
</td>
</tr>
<tr>
<td>
<input type="text" name="email1" value="">
</td>
<td>
<input type="text" name="chinese1" value="">
</td>
<td>
<input type="text" name="idcard1" value="">
</td>
</tr>
<tr>
<td>
<input type="text" name="email2" value="">
</td>
<td>
<input type="text" name="chinese2" value="">
</td>
<td>
<input type="text" name="idcard2" value="">
</td>
</tr>
<tr>
<td>
<input type="text" name="email3" value="">
</td>
<td>
<input type="text" name="chinese3" value="">
</td>
<td>
<input type="text" name="idcard3" value="">
</td>
</tr>
<tr>
<td>
<input type="button" value="验证" onclick="check();">
</td>
</tr>
</table>
如果觉得这些不够可以按照列子添加。
欢迎大家指出我这个菜鸟的不足啊！谢谢。