一個比較完善表單校驗插件

(function($){
$.fn.jStar.defaults = {
validationAttr: 'vtype', //需要校驗的標識屬性
warnAttr: 'warnText', //校驗錯誤時提示的文本屬性
errorMsgs: ''
};
$.fn.isValid=function(){
var vFlds = findValidateFields($(this)),
foucusFlag=0;
options.errorMsgs='';
var showErrorMsgsLengthFlag= 0,
flag=0;//控制顯示輸入錯誤的提示信息條數
$(vFlds).each(function(){
var fldValidations=buildSingleFldVType(this);
var errorMsg=buildErrorMsg(fldValidations,this);
if(errorMsg&&3==showErrorMsgsLengthFlag&&0==flag){ //這個判斷需要放在showErrorMsgsLengthFlag自增前面
options.errorMsgs+='[*]··· ···
';
flag++;
}
if(errorMsg&&showErrorMsgsLengthFlag<3){
options.errorMsgs+=errorMsg;
showErrorMsgsLengthFlag++;
}
});
//????光標定位????i still dont know how......
var firstErrorMsg=options.errorMsgs.substring(0,options.errorMsgs.indexOf('<br/>'));
if(firstErrorMsg){
var obj = $('[warnText]',this);
for(var i=0;i<obj.length;i++){
var errorMsg=$(obj[i]).attr('warnText');
if(firstErrorMsg==errorMsg){
// showErrorMsgs();
obj[i].focus();
return false;
}
}
}

if(options.errorMsgs.length>0)return false;
else return true;
};


function buildErrorMsg(fldValidations, field) {
var errorMsg = '';
for(var i = 0; i < fldValidations.length; i++){
var funcName = getVFunctionName(fldValidations[i]);
var params = buildVParams(fldValidations[i]);
if(!eval('$.fn.jStar.validations["'+funcName+'"](field, field.val()'+params+')')) {
errorMsg+='[*]'+$(field).attr(options.warnAttr)+'
';
}
}
return errorMsg;
}
//拿到需要校驗元素的校驗類型的參數。eg: range(1,100)
function buildVParams(validation) {
if(validation.indexOf('(') != -1) {
var arr = validation.substring(validation.indexOf('(') + 1, validation.length - 1).split(',');
var tempStr = '';


for(var i = 0; i < arr.length; i++) {
var single = trim(arr[i]);
if(parseInt(single)) {
tempStr += ','+single;
} else {
tempStr += ',"'+single+'"'
}
}


return tempStr;
} else {
return '';
}
}


//找到所有需要校驗的元素
function findValidateFields(form) {
var tags = 'input textarea select'.split(' ');
var fields = [];


for(var i = 0; i < tags.length; i++) {
form.find(tags[i]+'['+options.validationAttr+']').each(function() {
if($(this).attr(options.validationAttr)){//判斷options.validationAttr是否爲空
fields.push($(this));
}
});
}
return fields;
}
//各元素需要校驗的類型
function buildSingleFldVType(field) {
var valStr = field.attr(options.validationAttr);
var fldValidations=[];
var tempStr = '';
var openBrackets = 0;
for(var i = 0; i < valStr.length; i++) {
switch(valStr[i]) {
case ',':
if(openBrackets) {
tempStr += ',';
openBrackets--;
} else {
fldValidations.push(trim(tempStr));
tempStr = '';
}
break;
case '(':
tempStr += '(';
openBrackets++;
break;
case ')':
tempStr += ')';
fldValidations.push(trim(tempStr));
tempStr='';
break;
default:
tempStr += valStr[i];
}
if(valStr.length-1==i&&')'!=valStr[i]){//判斷最後一個字符是不是')',是則不執行下面一行代碼
fldValidations.push(tempStr);
}
}
return fldValidations;
}


function getVFunctionName(validation) {
if(validation.indexOf('(') != -1) {
return validation.substr(0, validation.indexOf('('));
} else {
return validation;
}
}
//去掉前後導空格
function trim(str) {
return str.replace(/^\s+/, '').replace(/\s+$/, '');
}
var options={};
options=$.fn.jStar.defaults;


})(jQuery);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章