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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
如何做到多笔资料的同步
2006/10/09 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
详解python实现线程安全的单例模式
2018/03/05 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python with语句的原理与用法详解
2020/03/30 Python
英文自荐信格式
2013/11/28 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
寒假安全保证书
2015/02/28 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
毕业论文致谢词
2015/05/14 职场文书
预备党员半年考察意见
2015/06/01 职场文书
python执行js代码的方法
2021/05/13 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python