斗膽放到首頁來，如果不合適的話就刪了吧，謝謝

其實這個框架也已經寫了一點了，但是越寫越亂越沒把握，最終決定寫成博客的形式，強迫自己慢下步調，一點點仔細地規劃，設計，思考，期間也一定會遇到不少問題，還請各位前輩多多指教

剛開始學習js的時候，看著＂無限靈活＂的語法頭疼得要命，恨不得有哪個廠商可以推出個強類型的客戶端語言來
但是這畢竟是空想，也只好一點一點地去啃js這塊大肉
依舊頭疼，看了不少書，看了不少文章，用用別人的框架偶爾還是可以的，但是對js的許多機制依舊是半生不熟，所以決定自己嘗試一下
正好最近有個小東西想要個表單驗證的功能，就試著寫一份了

對于表單驗證的框架，已經有不少了，園里也有個FormValidator，幾乎是非常地完美，所以自己總得弄出些新意來
想來想去，決定給自己的框架提高一下用戶的自定義能力，大致的功能如下：

１．簡單地配置，自帶多數常見的驗證功能，代碼表現上采用一步式配置
２．可自定義可重用的驗證器，只需繼承自某個基類
３．提供＂錯誤＂，＂正確＂及＂提醒＂３種狀態
４．用戶指定提示顯示的位置及方式

在參考了Ext及園里的FormValidator(感謝大家～）之后，大致的預覽如下

首先你可以自定義可重用的驗證器，只需要繼承自CustomValidator

MyValidator?=?CustomValidator.extend({?//CustomValidator為基類
????value:?'',
????
????doValidator:?function(input)?{
????????return?input.val()?>?this.settings.value;
????}
});
然后在管理器中注冊一下自己的驗證規則
ValidatorMgr.registerRule('myrule',?MyValidator);?//注冊myrule,其handler為MyValidator
然后采用Ext聲明組件的方式在input上掛上validator
$('#username').validator({
????errorMsg:?'Error!',
????validMsg:?'Valid!',
????focusMsg:?'Input?your?choice!',
????msgTarget:?'tip_username',?//信息顯示的element?id,如果為空則自動在當前input后加一個
????msgType:?'tip',?//tip表示顯示一個圖標,移上去后顯示內容??text表示直接顯示內容
????
????validators:?[{
????????rule:?'required',?//必需項
????????errorMsg:?'Required!'
????},?{
????????rule:?'length',?//長度驗證
????????minLen:?6,
????????maxLen:?20,
????????errorMsg:?'Length?should?be?between?6?and?20!'
????},?{
????????rule:?'value',
????????value:?'abc'
????},?{
????????rule:?'regex',?//正則驗證
????????regex:?'[a-zA-Z]{6,20}',
????????errorMsg:?'Wrong?format!'
????},?{
????????rule:?'custom',?//自定義驗證,可使用方法進行驗證
????????doValidate:?function(input)?{
????????????return?input.val()?==?'ABC';
????????},
????????errorMsg:?'Custom?validate?error!'
????},?{
????????rule:?'ajax',?//AJAX驗證,服務器需返回true或false
????????url:?'Validate.aspx',
????????errorMsg:?'Ajax?validate?error!'
????},?{
????????rule:?'myrule',?//使用注冊的類型
????????value:?'ABC',
????????errorMsg:?'My?validate?error!'
????}]
});
對于form，也有自己的validator，可以重寫success和fail方法
$('#form').setValidator({
????success:?function()?{
????????alert('OK!');
????}
????failure:?function(errors)?{
????????$.each(errors,?function()?{
????????????alert(this);
????????});
????}
});
具體的繼承關系如下圖

其中GroupValidator是最特殊的，直接掛在input下，而其他Validator全都保存于GroupValidator中，將會形成一條責任鏈以便調用

接下去大致想了一下難點：
１．繼承的問題，可以參考Ext的繼承的寫法，但是要看懂那個也得有些時日
２．validator放在哪里的問題，可以選擇在FormValidator里加入(從input.form.formValidator里找)，也可以直接加在input上（如input.validator = new GroupValidator();)
３．對js的不熟悉依舊是最大的敵人，努力再努力～

總結

以上是生活随笔為你收集整理的学习js,尝试写一个表单验证框架(1)－规划的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。