jquery検証プラグインをさらにカプセル化(easy-check)
17789 ワード
1、easy-check.js、コアコードは以下の通りです(demoを実行するか、何か問題があったら、伝言してもいいです)
2、テストページhtml、コードは以下の通り
var easyCheck;
var defaultOptions = {
showClass:'show_validate_div', // class
parentTag:'tr', //
successImage:'./right.gif', //
ErrorImage:'./error.gif', //
imageHeight:23, //
imageWidth:23, //
autoAjax:false, // blur ajax （ ， ajax ）
}
var settings,showClass,parentTag,successImage,ErrorImage,imageHeight,imageWidth,autoAjax;
$.easyCheck = function(options){
settings = $.extend(defaultOptions,options);
showClass = settings.showClass;
parentTag = settings.parentTag;
successImage = settings.successImage;
ErrorImage = settings.ErrorImage;
imageHeight = settings.imageHeight;
imageWidth = settings.imageWidth;
autoAjax = settings.autoAjax;
$('input').focus(function(){
var show_div_node = $(this).parents(parentTag).find('.' + showClass);
var input_val = $(this).val();
var objItem = $(this);
if(input_val=='' || input_val==null){
console.info(" info");
showMessage(objItem.attr('default'),show_div_node,false,false);
}
show_div_node.show();
}).blur(function(){
var show_div_node = $(this).parents(parentTag).find('.' + showClass);
var input_val = $(this).val();
var isError = false;
var objItem = $(this);
var validArr = validate(objItem, input_val, show_div_node,autoAjax);
isError = validArr['isCheck'];
var isAjax = validArr['isAjax'];
var isCard = validArr['isCard'];
if (isError && isAjax==false && isCard==false) {
showMessage(' ', show_div_node, false,true);
}
});
$("form").submit(function(){
var isSubmit = true;
$(this).find("input").each(function(){
var input_val = $(this).val();
var objItem = $(this);
var show_div_node = $(this).parents(parentTag).find('.' + showClass);
show_div_node.show();
var validArr = validate(objItem, input_val, show_div_node,true);
var isValidate = validArr['isCheck'];
if(isValidate==false){
isSubmit = isValidate;
}
});
return isSubmit;
});
}
/**
*
* 1、require， ， true Or false
* 2、min max， ，
* 3、reg, ，
* a、 reg num( )、tel( )、card( )、chinese( )、email( )、qq(qq)，
* ， 。
* b、 reg ， 。
* c、reg regMsg ，regMsg 。 ，reg ， regMsg ， ， 。
* 4、url,ajax ， input name ， ， input ， 。
* json ， ，error(1、 。0、 ),msg（ ）
*/
function validate(objItem,inputVal,showDivNode,ajaxValidate){
var isCheck = true;
var isAjax = false;
var isCard = false;
var validArr = new Array();
if(isExistNode(objItem,"require")){
isAjax = false;
isCard = false;
var requireVal = objItem.attr('require');
if(requireVal=='false' && (inputVal=='' || inputVal==null)){
showDivNode.hide();
return true;
}
isCheck = checkNull(requireVal,inputVal,showDivNode);
}
if(isExistNode(objItem,"min") && isCheck==true){
isAjax = false;
isCard = false;
var min = objItem.attr("min");
isCheck = checkLength(min,0,inputVal,showDivNode);
}
if(isExistNode(objItem,"max") && isCheck==true){
isAjax = false;
isCard = false;
var max = objItem.attr("max");
isCheck = checkLength(0,max,inputVal,showDivNode);
}
if (isExistNode(objItem,"reg") && isCheck == true) {
isAjax = false;
var regMsg = false;
if(isExistNode(objItem,"regMsg")){
regMsg = objItem.attr("regMsg");
}
var regStr = objItem.attr("reg");
if(regStr == 'card'){
isCard = true;
var reArr = checkCard(inputVal,showDivNode,regMsg);
if(reArr['error'] == true){
isCheck = false;
}
}else{
isCard = false;
isCheck = checkReg(regStr,inputVal,showDivNode,regMsg);
}
}
if (isExistNode(objItem,"url") && isCheck == true) {
isCard = false;
if(ajaxValidate){
isAjax = true;
var ajax_url = objItem.attr("url");
var inputName = objItem.attr("name");
ajax_url += "?"+inputName+"="+inputVal;
isCheck = ajaxVlidate(ajax_url,showDivNode);
}else{
isAjax = false;
isCheck = true;
}
}
validArr['isCheck'] = isCheck;
validArr['isAjax'] = isAjax;
validArr['isCard'] = isCard;
return validArr;
}
//
function checkNull(requireVal,inputVal,showDivNode){
var isCheck = true;
if(requireVal == 'true' && (inputVal=='' || inputVal==null)){
isCheck = false;
showMessage(' ',showDivNode,true,false);
}
return isCheck;
}
//
function checkLength(min,max,inputVal,showDivNode){
var isCheck = true;
if(inputVal.length<min && min!=0){
isCheck = false;
showMessage(' '+min+' ',showDivNode,true,false);
}else if(inputVal.length>max && max!=0){
isCheck = false;
showMessage(' '+max+' ',showDivNode,true,false);
}
return isCheck;
}
//
function checkReg(regStr,inputVal,showDivNode,regMsg){
var isCheck = true;
var reArr = getRegExp(regStr,regMsg);
var regExp = reArr['reExp'];
var errorMsg = reArr['errrMsg'];
if(!regExp.test(inputVal)){
isCheck = false;
showMessage(errorMsg,showDivNode,true,false);
}
return isCheck;
}
function getRegExp(regStr,regMsg){
var reExp = '';
var errrMsg = '';
if(regStr == 'email'){
reExp = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; //
errrMsg = ' ';
}else if(regStr == 'num'){
reExp = /^\d+$/;
errrMsg = ' ';
}else if(regStr == 'tel'){
reExp = /^([0-9]{11})?$/;
errrMsg = ' ';
}else if(regStr == 'chinese'){
reExp = /^[\u4E00-\u9FA5]+$/;
errrMsg = ' ';
}else if(regStr == 'qq'){
reExp = /'^[0-9]{4,12}/;
errrMsg = ' qq ';
}else{
reExp = new RegExp(regStr);
errrMsg = ' ';
}
if(regMsg!=false){
errrMsg = regMsg;
}
var reArr = new Array();
reArr['reExp'] = reExp;
reArr['errrMsg'] = errrMsg;
return reArr;
}
//ajax
function ajaxVlidate(url,showDivNode){
var isCheck = true;
var reArr = new Array();
$.ajax({
type: 'GET',
url: url,
async:false, //
dataType: "json",
success: function(data){
reArr['error'] = data.error;
reArr['msg'] = data.msg;
}
});
if(reArr['error']=='1'){
isCheck = false;
showMessage(reArr['msg'],showDivNode,true,false);
}else{
isCheck = true;
showMessage(reArr['msg'],showDivNode,false,true);
}
return isCheck;
}
//
function showMessage(message,showDivNode,isError,isValidate){
var successHtml = '<div style="float:left;">';
successHtml += '<img src="'+successImage+'" style="height:'+imageHeight+'px;width:'+imageWidth+'px;">';
successHtml += '</div>';
successHtml += '<span style="color:green;line-height:23px;margin-left:7px;">'+message+'</span>';
if(isError){
showDivNode.html(message);
showDivNode.css('color','red');
return;
}
if(isValidate){
showDivNode.html(successHtml);
return;
}
showDivNode.html(message);
showDivNode.css('color','green');
}
function isExistNode(objItem,nodeName){
return typeof(objItem.attr(nodeName))!="undefined";
}
//
function checkCard(idcard,showDivNode,regMsg){
var Errors=new Array(" !"," !"," !"," !"," !");
var area={11:" ",12:" ",13:" ",14:" ",15:" ",21:" ",22:" ",23:" ",31:" ",32:" ",33:" ",34:" ",35:" ",36:" ",37:" ",41:" ",42:" ",43:" ",44:" ",45:" ",46:" ",50:" ",51:" ",52:" ",53:" ",54:" ",61:" ",62:" ",63:" ",64:" ",65:"xinjiang",71:" ",81:" ",82:" ",91:" "}
var idcard,Y,JYM;
var S,M;
var idcard_array = new Array();
idcard_array = idcard.split("");
if(area[parseInt(idcard.substr(0,2))]==null){
error = true;
msg = Errors[4];
};
var reArr = new Array();
var error = false;
var msg = '';
switch(idcard.length){
case 15:
if ((parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//
}
else{
ereg = /^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//
}
if(ereg.test(idcard)){
error = false;
msg = Errors[0];
}else{
error = true;
msg = Errors[2];
}
break;
case 18:
if( parseInt(idcard.substr(6,4)) % 4 == 0 || ( parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//
}
else{
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//
}
if(ereg.test(idcard)){
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3 ;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y,1);
if(M == idcard_array[17]){
error = false;
msg = Errors[0];
}else{
error = true;
msg = Errors[3];
}
}else{
error = true;
msg = Errors[2];
}
break;
default:
error = true;
msg = Errors[1];
break;
}
reArr['error'] = error;
reArr['msg'] = msg;
if(regMsg!=false && reArr['error']==true){
reArr['msg'] = regMsg;
}
if(reArr['error']=='1'){
showMessage(reArr['msg'],showDivNode,true,false);
}else{
showMessage(reArr['msg'],showDivNode,false,true);
}
return reArr;
} 2、テストページhtml、コードは以下の通り
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> demo</title>
<script type='text/javascript' src='/test/jquery.min.js'></script>
<script type='text/javascript' src='/test/easy-check.js'></script>
<style type="text/css">
.show_validate_div{display:none;}
</style>
<script type="text/javascript">
var options = {
// showClass:'test_id', // class
}
$(document).ready(function(){
$.easyCheck(options);
});
</script>
</head>
<body>
<div style="width:500px;margin:0 auto;margin-top:200px;">
<form>
<table>
<tr>
<td>test </td>
<td><input type="text" require='false' name='uname' url='ajax.php' default=' ' autoAjax='true'></td>
<td style="width:200px;"><div class="show_validate_div" style="display:block;">
<div style="float:left;">
<img src="./right.gif" style="height:23px;width:23px;">
</div>
<span style="color:green;line-height:23px;margin-left:7px;"> </span>
</div>
</td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='false' name='uname' url='ajax.php' default=' ' autoAjax='true'></td>
<td><div class="show_validate_div" style="display:block;"><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='true' min="2" max='4' reg='chinese' default=' '></td>
<td><div class="show_validate_div" ><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='true' reg='^\w{2}\d+$' regMsg='[2 ]+[ ]' default=' '></td>
<td><div class="show_validate_div" ><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='true' default=' '></td>
<td><div class="show_validate_div"><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='true' reg='card' regMsg=' ' default=' '></td>
<td><div class="show_validate_div"><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='true' reg='num' default=' '></td>
<td><div class="show_validate_div"><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td> </td>
<td><input type="text" require='true' reg='email' regMsg=' ' default=' '></td>
<td><div class="show_validate_div" ><span style="color:green;"> </span></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value=" "></td>
<td></div></td>
</tr>
</table>
</form>
</div>
</body>
</html>