jquery数据验证插件(自制,简单,练手)实例代码


Posted in Javascript onOctober 24, 2013
(function($) {
    var defaults = {
        bugColor: '#FFCCCC', //数据有误的时候文本框颜色
        color: 'white', //数据正确时候文本框颜色
        type: "alert", //数据错误时候提示方式 alert 弹出框方式 text 赋值span html
        msg: "Msg", //数据有误的时候提示内容
        ResOjId: 'no'// 当test方式的时候 被赋值的标签 #id
    };
    function UiProcess(options, rexString, object) {
        var options = $.extend(defaults, options);
        var values = object.val();
        if (rexString.test(values)) {
            object.css("backgroundColor", options.color);
            return true;
        } else {
            object.css("backgroundColor", options.bugColor);
            if (options.type == "alert") {
                alert(options.msg);
            }
            if (options.type == "text") {
                $(options.ResOjId).html(options.msg);
            }
            return false;
        }
    }
    //验证ip是否符合格式
    $.fn.RegIp = function(options) {
        var rexString = /^\d{1,3}\.{1}\d{1,3}\.{1}\d{1,3}/;
        return UiProcess(options, rexString, this)
    }
    //验证座机是否符合格式
    $.fn.RegTelPhone = function(options) {
        var rexString = /^[0-9]+[-]?[0-9]+[-]?[0-9]$/;
        return UiProcess(options, rexString, this)
    }
    //验证手机是否符合格式
    $.fn.RegMombilePhone = function(options) {
        var rexString = /(^189\d{8}$)|(^13\d{9}$)|(^15\d{9}$)/;
        return UiProcess(options, rexString, this)
    }
    //验证中文是否符合格式
    $.fn.RegCHZN = function(options) {
        var rexString = /[\u4e00-\u9fa5]/;
        return UiProcess(options, rexString, this)
    }
    //验证decimal是否符合格式
    $.fn.RegDecimal = function(options) {
        var rexString = /^[0-9]+[.]?[0-9]+$/;
        return UiProcess(options, rexString, this)
    }
    //验证decimal保留一位小数是否符合格式
    $.fn.RegDecimalSign = function(options) {
        var rexString = /^[+-]?[0-9]+[.]?[0-9]+$/;
        return UiProcess(options, rexString, this)
    }
    //验证整数保留一位小数是否符合格式
    $.fn.RegNumber = function(options) {
        var rexString = /^[0-9]+$/;
        return UiProcess(options, rexString, this)
    }
    //验证各位整数保留一位小数是否符合格式
    $.fn.RegNumberSign = function(options) {
        var rexString = /^[+-]?[0-9]+$/;
        return UiProcess(options, rexString, this)
    }
    //验证非空字符
    $.fn.IsEmpty = function(options) {
        var rexString = /(^.+$)|([\u4e00-\u9fa5])/;
        return UiProcess(options, rexString, this)
    }
})(jQuery);

调用:

<script type="text/javascript">
        function submitOk() {
            var interfaceNameInput = $("#<%=interfaceName.ClientID %>");
            var userNameInput = $("#<%=userName.ClientID %>");
            var passWordInput = $("#<%=passWord.ClientID %>");
            var interfaceUrlInput = $("#<%=interfaceUrl.ClientID %>"); ;
            if (!interfaceNameInput.IsEmpty({ "msg": "接口名称格式不正确!" })) { return false }
            if (!userNameInput.IsEmpty({ "msg": "格式不正确!" })) { return false }
            if (!passWordInput.IsEmpty({ "msg": "格式不正确!" })) { return false }
            if (!interfaceUrlInput.IsEmpty({ "msg": "格式不正确!" })) { return false }
        }
    </script>
Javascript 相关文章推荐
javascript instanceof 与typeof使用说明
Jan 11 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 #Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 #Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 #Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 #Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 #Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 #Javascript
JS 获取滚动条高度示例代码
Oct 24 #Javascript
You might like
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python实现人机猜拳小游戏
2020/02/03 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
详解Python中namedtuple的使用
2020/04/27 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
给校长的建议书100字
2014/05/16 职场文书
2014年纪检工作总结
2014/11/12 职场文书
求职自我评价怎么写
2015/03/09 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
详解Python flask的前后端交互
2022/03/31 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电