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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
JS实现滑动导航效果
Jan 14 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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
如何选购合适的收音机
2021/03/01 无线电
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
javascript每日必学之继承
2016/02/23 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
详解Vue之事件处理
2020/07/10 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
pandas通过loc生成新的列方法
2018/11/28 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python tkinter模版代码实例
2020/02/05 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
《假如》教学反思
2014/04/17 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS