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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
浏览器兼容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 各种排序算法实现代码
2009/08/20 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
Vue组件化开发思考
2018/02/02 Javascript
Python的pycurl包用法简介
2015/11/13 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
2014年社区国庆节活动方案
2014/09/16 职场文书
普通党员整改措施
2014/10/24 职场文书
工厂见习报告范文
2014/10/31 职场文书
干部个人考察材料
2014/12/24 职场文书
单位工作证明范本
2015/06/15 职场文书
2019公司管理制度
2019/04/19 职场文书
文书工作总结(范文)
2019/07/11 职场文书