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 loading效果代码
Jun 18 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
javascript如何定义对象数组
Jun 07 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
HTML的select控件美化
Mar 27 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
Python os模块学习笔记
2015/06/21 Python
python实现用户登录系统
2016/05/21 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
什么是抽象
2015/12/13 面试题
护理专科毕业推荐信
2013/11/10 职场文书
学习决心书范文
2014/03/11 职场文书
2014年化验室工作总结
2014/11/21 职场文书
公司聚餐通知
2015/04/22 职场文书
我的长征观后感
2015/06/09 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
配置Kubernetes外网访问集群
2022/03/31 Servers
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android