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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
javascript不可用的问题探究
Oct 01 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
javascript History对象原理解析
Feb 17 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
如何一键升级Python所有包
2020/11/05 Python
Python读写Excel表格的方法
2021/03/02 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
环保志愿者活动总结
2014/06/27 职场文书
孔庙导游词
2015/02/04 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
运动会通讯稿600字
2015/07/20 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Python如何让字典保持有序排列
2022/04/29 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技