斗胆放到首页来,如果不合适的话就删了吧,谢谢
其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请各位前辈多多指教 刚开始学习js的时候,看着"无限灵活"的语法头疼得要命,恨不得有哪个厂商可以推出个强类型的客户端语言来 但是这毕竟是空想,也只好一点一点地去啃js这块大肉 依旧头疼,看了不少书,看了不少文章,用用别人的框架偶尔还是可以的,但是对js的许多机制依旧是半生不熟,所以决定自己尝试一下 正好最近有个小东西想要个表单验证的功能,就试着写一份了 对于表单验证的框架,已经有不少了,园里也有个FormValidator,几乎是非常地完美,所以自己总得弄出些新意来 想来想去,决定给自己的框架提高一下用户的自定义能力,大致的功能如下: 1.简单地配置,自带多数常见的验证功能,代码表现上采用一步式配置 2.可自定义可重用的验证器,只需继承自某个基类 3.提供"错误","正确"及"提醒"3种状态 4.用户指定提示显示的位置及方式 在参考了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中,将会形成一条责任链以便调用 接下去大致想了一下难点: 1.继承的问题,可以参考Ext的继承的写法,但是要看懂那个也得有些时日 2.validator放在哪里的问题,可以选择在FormValidator里加入(从input.form.formValidator里找),也可以直接加在input上(如input.validator = new GroupValidator();) 3.对js的不熟悉依旧是最大的敌人,努力再努力~