博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学习js,尝试写一个表单验证框架(1)-规划
阅读量:6675 次
发布时间:2019-06-25

本文共 2199 字,大约阅读时间需要 7 分钟。

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

其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请各位前辈多多指教
刚开始学习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的不熟悉依旧是最大的敌人,努力再努力~

转载于:https://www.cnblogs.com/GrayZhang/archive/2008/05/12/1193213.html

你可能感兴趣的文章
性能下降曲线
查看>>
求一个数的二进制中1的个数
查看>>
古代教育观点纵览
查看>>
Linux 下搭建PHP环境(make方法)太麻烦了
查看>>
《三》kubectl命令行管理工具、YAML配置详解
查看>>
iozone测试文件系统性能
查看>>
Hadoop - HDFS的数据流剖析
查看>>
Win7下部署asp.net程序如果有RDLC报表需要以下配置
查看>>
Jhipster_cn中文翻译组
查看>>
Nagios简介与安装(1)
查看>>
centos 本地yum配置
查看>>
使用Vundle来管理vim的插件
查看>>
我们容易忽略的WebDriver 的一些方法
查看>>
Windows借助脚本实现自动化加域
查看>>
构造函数私有化
查看>>
我的友情链接
查看>>
Linux Shell编程
查看>>
归档与反归档
查看>>
Learning Data Structure_5_图(2)
查看>>
HDS G1000和Gx00的端口属性
查看>>