簡易JQuery表單驗證外掛程式

2021-05-22 20:40:00 字數 4291 閱讀 7868

/**

* jquery 表單驗證外掛程式

* file: form.validator.js

* useage:

$('#formid').addvalidator

( ,

password:

},errorshowin: 'span', // 預設span,可選html標籤名

errorclass: 'fv-error', // 預設fv-error

submitbefore: afunction // 預設null,即只要表單驗證通過就提交,不做任何提交前的處理,若不為null並且是函式,那麼執行該函式:返回true(提交)或false(不提交)

}); * @author tshichun 2010.06.03

*/(function($)

});/*驗證器*/

$.validator = function(options, form) ,

$.validator.defaults, options);

this.form = form;

this.errors = ; // 登記驗證不通過的表單元素

this.velements = ; // 等待驗證的元素

this.init();

}; $.extend($.validator, ,

submitbefore: null,

// 提交表單前要做的事

errorclass: 'fv-error',

errorshowin: 'span'

},// 例項成員定義在 prototype 內

prototype: );

self.addvalidations();

},// 通過表單元素名查詢元素

getbyname: function(name) );

return (typeof element.length != 'undefined' && element.length == 0) ? null: element[0];

},// 通過表單元素名取得對應已設定的驗證規則

getvalidationsbyname: function(name) ,

// 給表單元素新增驗證規則

addvalidations: function()

self.velements.push(element);

// 什麼時機驗證,預設blur(元素失去焦點)

if (typeof value.vwhen != 'undefined') );

} else

} else

});},

// 新增事件

addevent: function(type, element, handler) );

},// 取表單元素值

getvalue: function(element)

},// 取元素或元素值長度

getlength: function(element)

return this.getvalue(element).length;

},// 是否單選或複選按鈕

checkable: function(element) ,

// 是否驗證通過

isvalid: function() ,

// 驗證表單元素

validate: function(element, ignoreremote)

// 使用給定的驗證規則進行驗證

$.each(validations,

function(key, value) else

});}

},// 驗證表單

validateform: function()

if (!this.isvalid()) return false;

var cansubmit = true;

if (this.settings.submitbefore != null && $.isfunction(this.settings.submitbefore))

return this.isvalid() && cansubmit;

},// 準備被驗證的表單元素

elements: function() ,

// 執行表單元素驗證,通過返回true否則false

_validatecall: function(method, element, params) ,

// 是否包含 required 驗證規則,並且 required[0] 為 true

_isrequired: function(validations) ,

// 是否包含某個鍵,包含則返回該鍵對應的值

_contain: function(keyname, inarray)

});return contain;

},// 清除錯誤訊息

cleanerrormsg: function(element) ,

// 顯示錯誤訊息

showerrormsg: function(element, errormsg) ,

// 登記乙個未通過驗證的元素

adderrorelement: function(element, validatekey) ,

// 取消登記之前未通過驗證的元素

removeerrorelement: function(element, validatekey)

},// 內建驗證方法

methods:

},// 最小長度

minlength: function(element, params) ,

// 最大長度

maxlength: function(element, params) ,

// 是否郵箱

email: function(element, params)

$ / i.test(this.getvalue(element));

},// 正則驗證

regex: function(element, params) ,

// 中文姓名

cnname: function(element, params) $/.test(this.getvalue(element));

},// **區號

areanum: function(element, params)

$ / .test(this.getvalue(element));

},// **號碼

tel: function(element, params)

$ / .test(this.getvalue(element));

},// 移動**號碼

mobiletel: function(element, params) (13/d | 15 / d | 18 / d) / d

$ / .test(this.getvalue(element));

},// 全是數字

digits: function(element, params) ,

// url

url: function(element, params) /.)[0-9]|"; // ip形式的url

regex += "([0-9a-z_!~*'()-]+/.)*"; // 網域名稱

regex += "([0-9a-z][0-9a-z-])?[0-9a-z]/."; // 二級網域名稱

regex += "[a-z])";

regex += "(:[0-9])?"; // 埠

regex += "((/?)|";

regex += "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";

return new regexp(regex, 'i').test(this.getvalue(element));

},// 兩個元素值比較

equalto: function(element, params) ,

// 遠端伺服器驗證

remote: function(element, params)

datas[element.name] = self.getvalue(element);

$.get(params[0], datas,

function(data) else

});if (!isdone) return true;

else return ! $.inarray(element.name, self.errors);}}

} });

})(jquery);

jquery 表單驗證外掛程式

1 為inputvalidator增加empty屬性。用於設定控制項文字值是否允許兩邊為空。具體請看demo1裡的密碼的校驗 該屬性是個物件,預設值 leftempty 表示左邊是否允許為空 rightempty 表示右邊是否允許為空 emptyerror 出現該錯誤的時候的提示,如果為null,則...

簡易表單驗證外掛程式

學習完一門語言時難免會有一些想法與激情來驅動我們開發,以下是本人為了學習所編寫的輪子,即使別人寫的再香,我也想構造一套自己的表單驗證 form.evaluate submit function if typeof modelstr boolean var vmodel notice 請填入您的姓名 ...

jquery驗證外掛程式 js表單驗證

寫道關鍵字 jquery驗證外掛程式 現在我做乙個註冊的驗證示例 需要字段 規則 username 必填 長度2 15 只能包含字母數字和下劃線 中文 password 必填 長度6 16 repassword 必填 長度6 16 值必須和密碼一樣 email 必填 必須符合郵件的格式 首先引入相關...