表单数据验证工具 validForm-js

MIT
JavaScript
跨平台
2016-07-08
reamd

validForm 是原生js表单数据验证工具

使用方法

  • 首先引入src目录中的validForm.js或dist目录中的validForm.min.js(压缩版)

    • 代码实例:

<form id="mainForm">
    方式<select name="method" id="test">
        <option value="">请填写</option>
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
    </select><br>
    姓名<input type="text" name="name" /><br>
    密码<input type="password" name="pwd" /><br>
    邮箱<input type="text" name="email" /><br>
    <button id="submit">提交</button><br>
</form>
$('#submit').on('click', function(){
        var data = {
            method:['select[name="method"]', null, '请选择方式'],
            name:  ['input[name="name"]', , '姓名必填'],
            pwd:   ['input[name="pwd"]', '', '密码必填'],
            email: ['input[name="email"]', 'empty', '邮箱必填']
        };
        var model = {el: '#mainForm', data: data};
        validForm(model, function(msg){
            alert(msg);
        });
    });

/*****详细说明:******/
   /*
    * data(校验数据集合): { 校验单元名称: [ 校验元素(css选择器语法), 校验规则(正则表达式或内置校验规则), 校验提示语(空校验正确提示,其它校验失败提示)] }
    * model(校验模型): { el: 校验表单(css选择器语法), data: [data[method], data[name]](自定义校验数据集合)}
    * 内置校验规则:
    *   1.empty    空(空的校验规则也可以是null、undefined、'')
    *   2.isNumber 数字格式
    *   3.isEmail  email格式
    *   4.isUrl    url格式
    *   5.isMobile 手机号格式
    *   6.isID     身份证号格式
    *   7.isDate   日期格式(2014-07-05 2014-7-5 或2014/07/05 2014/7/5)
    * 
    * model的另一种等价写法:
    * var model = {el: '#mainForm', data: [data.method, data.name, data.pwd, data.email]};
    *
    * 调用时,也可以写为validForm(model)回调函数不写,默认采用原生alert方式提示 
    */
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

前端常用插件、工具类库汇总(上)

前言 在开发中,我们经常会将一些常用的代码块、功能块进行封装,为的是更好的复用。那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件。 下面这些是我在工作中积...

2018/11/12 10:42
51
0
【转】240多个jQuery插件

参考文档:http://www.cnblogs.com/terrylee/articles/988623.html 文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an in...

2013/05/28 15:55
170
1
[JavaScript]240个jQuery实现AJAX插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 00:12
57
0
强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 11:53
220
0
【转】75种常用的jquery网页特效

参考文档:http://www.oschina.net/code/snippet_187746_9846 1、jquery图片特效(14种 ) (1)、jquery cycle 循环插件多功能幻灯片插件支持多种幻灯片特效 (2)、jquery flow 图片切换滚...

2013/05/28 15:28
834
0
DOM对象与JQuery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

2014/09/13 16:19
21
0
js:滚动页面时自动激活对应菜单中的条目

这个在[Change Active Menu Item on Page Scroll?](http://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll)有详细的讨论。对应的代码在[http://jsfiddle.net/...

2015/11/20 15:18
81
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

2018/11/04 19:51
54
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部