jquery 通用表單驗證

主要用到了jquery，以及自定義的一個屬性wl_check，屬性說明如下：

1、文法

[need:true,type:int,maxlen:15,minlen:2]

2、關鍵字

need：文本輸入框的必填限制

regtype：文本輸入框的正規表達式類别驗證

minlen：文本輸入框的最小輸入長度

maxlen：文本輸入框的最大輸入長度

minval：數字型文本輸入框的最值

maxval：數字型文本輸入框的最值

notval：下拉框的必選設定

minselect：單複選框的最少選項數

maxselect：單複選框的最多選項數

sequence：預設從100--1000，如果需要打亂頁面控件順序可設定值，<100 或 >1000，按從小到大驗證

group：【group:txtArea-1-1】其中“txtArea”是pre控件值，“-1-1”表示最少填寫一個，最多填寫一個。

manage：可以設定與某一控件的關系“= != > < >= <= + -”

...

3、使用範圍

input:text

input:radio 注意id為'_i'

input:checkbox 注意id為'_i'

textarea

select

4、描述

a、在有wl_check屬性的表單控件值發生變化時會自行調用相應的驗證方法，該方法無傳回值，隻是出錯提示并定位。

b、在頁面post時需要先對某一域内有wl_check屬性的表單控件進行驗證，通過傳回true；否則彈出提示資訊并取消送出。

5、使用示例-見demo

表示該文本框必填，并且最多10個字，最少2各個字

完全驗證代碼

/**********************************************************************/

/*目前版本1.1*/

/*linfeng-林峰|2010-04-編寫與上海浦東|用于：表單驗證【該行請勿删除】*/

/*linfeng-林峰|2010-08-12-修改*/

/**********************************************************************/

/*表單驗證解析器*/

/*隐藏及不在頁面顯示的控件不進行驗證*/

function formCheck(domid) {

var obj = new formcheckparse(domid, "check");

return obj.check();

}

/*控件onblur事件時處罰*/

/*單個控件onblur事件不執行為空判斷*/

function blurCheck(domid) {

$("input:text[wl_check]").each(function(i) {

$(this).blur(function() { var obj = new formcheckparse(domid, "blur"); obj.blurcheck($(this)); });

});

$("textarea[wl_check]").each(function(i) {

$(this).blur(function() { var obj = new formcheckparse(domid, "blur"); obj.blurcheck($(this)); });

});

$("input:password[wl_check]").each(function(i) {

$(this).blur(function() { var obj = new formcheckparse(domid, "blur"); obj.blurcheck($(this)); });

});

}

/*-----------------------------------------------------------------------------------------*/

/*以下為封裝腳本-僅供學習*/

/*-----------------------------------------------------------------------------------------*/

jQuery(formcheckparse = function(domid, ctype) {

this.author = "linfeng-林峰|2010-04-編寫與上海浦東|用于：表當驗證【該行請勿删除】";

this.domid = domid;

this.blurcheck = function(obj) {/*控件onblur事件時處罰*/

obj.val($.trim(obj.val())); /*去掉開始結束的空格alert(obj.attr('wl_check')); alert(obj.val());*/

var my_array = obj.attr('wl_check').split(','); /*目前處理控件的驗證鍵值組*/

match(obj, my_array);

};

this.check = function() {

var arr_control = new Array();

/*排序字段預設從100開始到1000結束，如果需要附加排序請記住該規則，可以設定<100或>1000*/

function MyObjectControls(_obj, _sequence, _group, _manage) {

this.control = _obj;

this.sequence = _sequence;

this.group = _group;

this.manage = _manage;

}

var returnValue = true;

$("#" + this.domid + " input:text[wl_check]:visible").each(function(i) {

$(this).val($.trim($(this).val())); /*去掉開始結束的空格*/

arr_control.push($(this));

}); /*驗證輸入框*/

$("#" + this.domid + " textarea[wl_check]:visible").each(function(i) {

$(this).val($.trim($(this).val())); /*去掉開始結束的空格*/

arr_control.push($(this));

}); /*驗證多行輸入框*/

$("#" + this.domid + " input:password[wl_check]:visible").each(function(i) {

$(this).val($.trim($(this).val())); /*去掉開始結束的空格*/

arr_control.push($(this));

}); /*驗證密碼輸入框*/

$("#" + this.domid + " select[wl_check]:visible").each(function(i) {

arr_control.push($(this));

}); /*驗證下拉框*/

$("#" + this.domid + " span[wl_check]:visible").each(function(i) {

arr_control.push($(this));

}); /*驗證單複選框*/

$("#" + this.domid + " table[wl_check]:visible").each(function(i) {

arr_control.push($(this));

}); /*驗證單複選框*/

if (arr_control.length > 0) {

/*20100813-增加控件的排序*/

/*20100813-增加控件的分組*/

/*20100813-增加控件的受控*/

var arrMyObjectControls = new Array();

var arrMyObjectGroups = new Array();

var arrMyObjectBeManages = new Array();

/*設定排序值*/

for (var i = 0; i < arr_control.length; i++) {

/*20100813-排序*/

var thisSequence = gettypevalue(arr_control[i], 'sequence', i + 100);

/*20100813-分組*/

var thisGroup = gettypevalue(arr_control[i], 'group', '');

/*20100813-受控*/

var thisManage = gettypevalue(arr_control[i], 'manage', '');

/*調試點：alert(thisSequence);*/

var newMyObjectControls = new MyObjectControls(arr_control[i], thisSequence,thisGroup,thisManage);

/*将分組的控件放入數組*/

if(thisGroup.length>0){

arrMyObjectGroups.push(newMyObjectControls);

}

/*将受控的控件放入數組*/

if(thisManage.length>0){

arrMyObjectBeManages.push(newMyObjectControls);

}

arrMyObjectControls.push(newMyObjectControls);

}

/*冒泡排序-按排序逆序*/

var len = arrMyObjectControls.length;

/*調試點：alert(len);*/

for (var i = 0; i < len; i++) {

var boolchg = false;

for (var j = 0; j < len - 1; j++) {

var One = arrMyObjectControls[j];

var Two = arrMyObjectControls[j + 1];

/*調試點：alert(arrMyObjectControls[j].sequence+'|'+j);*/

if (parseInt(One.sequence) > parseInt(Two.sequence)) {

arrMyObjectControls[j] = Two; arrMyObjectControls[j + 1] = One; boolchg = true;

}

if (!boolchg) break;

}

/*周遊驗證*/

for (var i = 0; i < arrMyObjectControls.length; i++) {

/*調試點：alert(arrMyObjectControls[i].sequence);*/

var my_array = arrMyObjectControls[i].control.attr('wl_check').split(','); /*目前處理控件的驗證鍵值組*/

/*if (this.author.indexOf('lin') == -1 || this.author.indexOf('林') == -1) return true;*/

returnValue = match(arrMyObjectControls[i].control, my_array); if (!returnValue) return returnValue;

/*分組測試-調試點：alert(arrMyObjectControls[i].group+'|'+arrMyObjectControls[i].control.attr('id'));*/

if(arrMyObjectControls[i].group.length>1 && arrMyObjectControls[i].group.indexOf(arrMyObjectControls[i].control.attr('id'))!=-1){

returnValue = grouptest(arrMyObjectControls, arrMyObjectGroups,i); if (!returnValue) return returnValue;

}

/*受控測試-調試點：alert(arrMyObjectControls[i].manage+'|'+arrMyObjectControls[i].control.attr('id'));*/

if(arrMyObjectControls[i].manage.length>1 && arrMyObjectControls[i].manage.indexOf(arrMyObjectControls[i].control.attr('id'))!=-1){

returnValue = managetest(arrMyObjectControls,i); if (!returnValue) return returnValue;

}

return returnValue;

};

/**私有函數**/

match = function(obj, my_array) {/*私有方法-解析驗證方式*/

var returnValue = true; /*alert(obj.attr('wl_check'));alert(my_array.length);*/

if (my_array.length > 0) {

for (var i = 0; i < my_array.length; i++) {

var my_array_items = new Array();

my_array_items = my_array[i].split(':');

if (my_array_items.length > 1) {

returnValue = matchItem(obj, my_array, my_array_items[0], my_array_items[1]);

}

if (!returnValue) break;

}

return returnValue;

};

grouptest = function(_arrControls, _arrGroups, _i) {/*私有方法-分組測試*/

var arrGroup = _arrControls[_i].group.split('-');

var minGroup = arrGroup[1];

var maxGroup = arrGroup[2];

var nowGroup = 0;

var infoGroup = '“';

for (var k = 0; k < _arrGroups.length; k++) {

if(_arrGroups[k].group==_arrControls[_i].group){

infoGroup += _arrGroups[k].control.attr('title')+'、';

if(_arrGroups[k].control.val().length>0){

nowGroup++;

}

infoGroup += '”';

infoGroup =infoGroup.split( '、”').join('”');

if(nowGroup<minGroup){

alert(infoGroup+'中至少要填寫'+ minGroup +'項！');

_arrControls[_i].control.focus();

return false;

}

if(nowGroup>maxGroup){

alert(infoGroup+'中最多填寫'+ maxGroup +'項！');

_arrControls[_i].control.focus();

return false;

}

return true;

};

managetest = function(_arrControls, _i) {/*私有方法-受控測試*/

var manage_type = '+';

var arrManage = null;

if(_arrControls[_i].manage.indexOf('-')!=-1){

manage_type = '-';

arrManage = _arrControls[_i].manage.split('-');

}

else if(_arrControls[_i].manage.indexOf('-')!=-1){

manage_type = '+';

arrManage = _arrControls[_i].manage.split('+');

}

else if(_arrControls[_i].manage.indexOf('!=')!=-1){

manage_type = '!=';

arrManage = _arrControls[_i].manage.split('!=');

}

else if(_arrControls[_i].manage.indexOf('=')!=-1){

manage_type = '=';

arrManage = _arrControls[_i].manage.split('=');

}

else if(_arrControls[_i].manage.indexOf('>=')!=-1){

manage_type = '>=';

arrManage = _arrControls[_i].manage.split('>=');

}

else if(_arrControls[_i].manage.indexOf('<=')!=-1){

manage_type = '<=';

arrManage = _arrControls[_i].manage.split('<=');

}

else if(_arrControls[_i].manage.indexOf('>')!=-1){

manage_type = '>';

arrManage = _arrControls[_i].manage.split('>');

}

else if(_arrControls[_i].manage.indexOf('<')!=-1){

manage_type = '<';

arrManage = _arrControls[_i].manage.split('<');

}

var nowManage = 0;

var aManage =$('#'+arrManage[0]);

var bManage =$('#'+arrManage[1]);

var infoManage = aManage.attr('title')+'、'+bManage.attr('title');

/*測試點：alert(infoManage);*/

if(aManage.val().length>0){

nowManage++;

}

if(bManage.val().length>0){

nowManage++;

}

if(manage_type == '+' && nowManage==1){

alert(infoManage+'必須同時填寫！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '-' && nowManage==2){

alert(infoManage+'至多填寫一項！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '-' && nowManage==0){

alert(infoManage+'至少填寫一項！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '!=' && aManage.val()==bManage.val()){

alert(infoManage+'輸入值不可以一樣！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '=' && aManage.val()!=bManage.val()){

alert(infoManage+'輸入值必須一樣！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '>=' && aManage.val()<bManage.val()){

alert(aManage.attr('title')+'必須不小于'+bManage.attr('title')+'！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '<=' && aManage.val()>bManage.val()){

alert(aManage.attr('title')+'必須不大于'+bManage.attr('title')+'！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '>' && aManage.val()<=bManage.val()){

alert(aManage.attr('title')+'必須大于'+bManage.attr('title')+'！');

_arrControls[_i].control.focus();

return false;

}

else if(manage_type == '<' && aManage.val()>=bManage.val()){

alert(aManage.attr('title')+'必須小于'+bManage.attr('title')+'！');

_arrControls[_i].control.focus();

return false;

}

return true;

};

gettypevalue = function(_control, _type, _defaultValue) {/*私有方法-擷取自定義屬性值，預設100*/

var returnValue = _defaultValue;

var my_array = _control.attr('wl_check').split(',');

if (my_array.length > 0 && _control.attr('wl_check').indexOf(_type + ':') != -1) {

for (var i = 0; i < my_array.length; i++) {

if (my_array[i].indexOf(_type + ':') != -1) {

var my_array_items = new Array();

my_array_items = my_array[i].split(':');

if (my_array_items.length > 0) {

returnValue = my_array_items[1];

}

return returnValue;

};

getinfo = function(my_array) {/*私有方法-擷取自定義提示資訊*/

var returnInfo = ""; /*alert(my_array.join(','));*/

if (my_array.length > 0 && my_array.join(',').indexOf('info:') != -1) {

for (var i = 0; i < my_array.length; i++) {

if (my_array[i].indexOf('info:') != -1) {

var my_array_items = new Array();

my_array_items = my_array[i].split(':');

if (my_array_items.length > 0) {

returnInfo = my_array_items[1];

}

} /*alert(returnInfo);*/

return returnInfo;

};

matchItem = function(obj, my_array, key, val) {/*私有方法-項目驗證*/

var boolReturn = true; /*alert(obj.attr('wl_check'));alert(key);*/

switch (key) {

case 'need':

boolReturn = isEmpity(obj, my_array);

break;

case 'regtype':

boolReturn = isRegMatch(obj, my_array, key, val);

break;

case 'minlen':

boolReturn = isTooShort(obj, my_array, key, val);

break;

case 'maxlen':

boolReturn = isTooLong(obj, my_array, key, val);

break;

case 'minval':

boolReturn = isTooMin(obj, my_array, key, val);

break;

case 'maxval':

boolReturn = isTooMax(obj, my_array, key, val);

break;

case 'notselect':

boolReturn = isNotSelect(obj, my_array, key, val);

break;

case 'minselect':

boolReturn = isTooMinSelect(obj, my_array, key, val);

break;

case 'maxselect':

boolReturn = isTooMaxSelect(obj, my_array, key, val);

break;

default:

break;

}

return boolReturn;

};

isTooMinSelect = function(obj, my_array, key, val) {/*OK--私有方法-是否選擇了過多項*/

var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.attr('id'));*/

var _count = getSelectCount(obj.attr('id'));

if (_count < val) {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "至少選擇" + val + "項！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isTooMaxSelect = function(obj, my_array, key, val) {/*OK--私有方法-是否選擇了過多項*/

var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.val());*/

var _count = getSelectCount(obj.attr('id'));

if (_count > val) {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "最多選擇" + val + "項！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

getSelectCount = function(spanid) {/*OK--私有方法-傳回某一域内單選複選框已選擇個數*/

var intReturn = 0; /*alert($("#"+spanid+" input").length);alert(spanid);*/

$("#" + spanid + " input[type=checkbox]").each(function(i) {

if (this.checked) intReturn++;

});

$("#" + spanid + " input[type=radio]").each(function(i) {

if (this.checked) intReturn++;

});

return intReturn;

};

isNotSelect = function(obj, my_array, key, val) {/*OK--私有方法-是否選擇了預設值*/

var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.val());*/

if (obj.val() == val) {

var info = getinfo(my_array);

if (info == '') info = "請選擇" + obj.attr('title') + "！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isRegMatch = function(obj, my_array, key, val) {/*OK--私有方法-是否太小*/

var boolReturn = true; /*alert(obj.attr('wl_check'));alert(obj.val() + '|' + val);*/

var crReturn = cregMatch(obj.val(), val) + '';

if (crReturn.toLowerCase() == 'false') {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "格式錯誤，請準确輸入！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isTooMin = function(obj, my_array, key, val) {/*OK--私有方法-是否太小*/

var boolReturn = true; /*alert(obj.attr('wl_check'));*/

if (boolReturn && parseFloat(obj.val()) < parseFloat(val)) {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "輸入值太小，最小值為" + val + "！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isTooMax = function(obj, my_array, key, val) {/*OK--私有方法-是否太大*/

var boolReturn = true; /*alert(obj.attr('wl_check'));*/

if (boolReturn && parseFloat(obj.val()) > parseFloat(val)) {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "輸入值太大，最大值為" + val + "！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isTooLong = function(obj, my_array, key, val) {/*OK--私有方法-是否太長*/

var boolReturn = true; /*alert(obj.attr('wl_check'));*/

if (boolReturn && obj.val().length > val) {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "輸入值太長，請最多輸入" + val + "個字！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isTooShort = function(obj, my_array, key, val) {/*OK--私有方法-是否太短*/

var boolReturn = true; /*alert(obj.attr('wl_check'));*/

if (boolReturn && obj.val().length < val) {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "輸入值太短，請至少輸入" + val + "個字！";

alert(info);

obj[0].focus();

boolReturn = false;

}

return boolReturn;

};

isEmpity = function(obj, my_array) {/*OK--私有方法-是否為空*/

var boolReturn = true; /*alert(obj.attr('wl_check'));alert(ctype);*/

if (boolReturn && ctype != 'blur' && obj.val() == "") {

var info = getinfo(my_array);

if (info == '') info = obj.attr('title') + "不可為空！";

alert(info);

obj[0].focus();

boolReturn = false;

}

if (ctype == 'blur' && obj.val() == "") return false;

return boolReturn;

};

cregMatch = function(str, type) {/*私有方法-正規表達式驗證*/

str = str.toLowerCase(); /*alert(str + '|' + type);*/

var re = null;

re = /[/x00-/xff]/g;

if (type == 'money') {

re = /^(([1-9][0-9]*/.[0-9]+)|([0]/.[0-9]*[1-9]+[0-9]*)|([1-9][0-9]*)|0)$/g; //金錢、包括0

}

else if (type == 'uname') {

re = /^(/w{3,})$/g; //使用者名

}

else if (type == 'int') {

re = /^(([1-9][0-9]*)|0)$/g; //正整數+0

}

else if (type == 'idcard') {

if (str.length != 15 && str.length != 18) return false;

re = /^([0-9]/d{5})(((([1][9])?)/d{2})|([2]/d{3}))(([1][0-2])|([0][1-9]))(([0-2][1-9])|([1-3][0])|31)(/d{2,3}([x]|[0-9]))$/g; //簡易驗證身份證

}

else if (type == 'info') {

re = /^(([^x]|[x])*[/u4E00-/u9FA5]+([^x]|[x])*)$/g; //必須有漢字

}

else if (type == 'percent') {

re = /^(([1-9][0-9]?/.[0-9]{1,3})|([0]/.[0-9]{0,2}[1-9])|([0]/.[1-9][0-9]{0,2})|([0]/.[0-9][1-9][0-9])|([1-9][0-9]?)|0|100)$/g;

}

else if (type == 'emil') {

re = /^(/w+([-+.']/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*)$/g;

}

else if (type == 'mobile') {

re = /^([1][3|5]/d{9})$/g;

}

else if (type == 'timeymd') {

re = /^((((([1][9])|([2][0]))?)/d{2})/-(([1][0-2])|([0][1-9])|[1-9])/-(([0-2][1-9])|([1-3][0])|31|[1-9]))$/g; //時間

}

else if (type == 'checkcode4') {

re = /^(/d{4})$/g;

}

else if (type == 'age_2') {

re = /^([1-9][0-9]?)$/g;

}

else if (type == 'int_3') {

re = /^([1-9][0-9]{0,2})$/g;

}

else if (type == 'int_4') {

re = /^([1-9][0-9]{2,3})$/g;

}

else if (type == 'zipcode') {

re = /^(/d{6})$/g;

}

else if (type.length >0) {

type=type.split(';').join(',');

re = new RegExp(type, "ig");

}

return str.match(re) ? true : false;

};

}

);

jquery 通用表單驗證

繼續閱讀

利用Fiddler進行移動端弱網測試

基于XOR的加密程式

不用iconv函數實作UTF-8編碼轉換GB2312的PHP函數

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

各種二分查找

【原創】程式設計之美之二分搜尋

JQuery--dom捕獲html元素

CentOS7下TestLink環境的部署

軟體測試基礎_對應TestLink整理的測試計劃流程步驟

七牛雲-C#SDK-上傳-前期準備

[轉]iOS微信小視訊優化心得

jquery_126_demo

無元件上傳圖檔到資料庫中，最完整解決方案

neo4j之cypher使用文檔

測試面試題整理