学习js,尝试写一个表单验证框架(1)－规划

斗胆放到首页来，如果不合适的话就删了吧，谢谢

其实这个框架也已经写了一点了，但是越写越乱越没把握，最终决定写成博客的形式，强迫自己慢下步调，一点点仔细地规划，设计，思考，期间也一定会遇到不少问题，还请各位前辈多多指教

刚开始学习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的不熟悉依旧是最大的敌人，努力再努力～