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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
详解Vue使用命令行搭建单页面应用
May 24 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
pyside写ui界面入门示例
2014/01/22 Python
详解Python中的array数组模块相关使用
2016/07/05 Python
django的登录注册系统的示例代码
2018/05/14 Python
django输出html内容的实例
2018/05/27 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
迪奥官网:Dior.com
2018/12/04 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
对公司合理化的建议书
2014/03/12 职场文书
《云房子》教学反思
2014/04/20 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
运动会加油口号
2014/06/07 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python