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 相关文章推荐
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
让table变成exls的示例代码
Mar 24 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
Vue中使用Sortable的示例代码
Apr 07 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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 一个比较完善的简单文件上传
2010/03/25 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
phpfpm的作用和用法
2019/10/10 PHP
php桥接模式应用案例分析
2019/10/23 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python基于DES算法加密解密实例
2015/06/03 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
python中的lambda表达式用法详解
2016/06/22 Python
jupyter notebook清除输出方式
2020/04/10 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党员个人年度总结
2015/02/14 职场文书
工商局个人工作总结
2015/03/03 职场文书
小学同学聚会感言
2015/07/30 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js
python区块链实现简版工作量证明
2022/05/25 Python
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang