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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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递归算法的详细示例分析
2013/02/19 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php生成与读取excel文件
2016/10/14 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
python解析xml文件操作实例
2014/10/05 Python
python的keyword模块用法实例分析
2015/06/30 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python 读取DICOM头文件的实例
2018/05/07 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
internal修饰符起什么作用
2013/12/16 面试题
市级文明单位申报材料
2014/05/07 职场文书
清明节演讲稿
2014/05/27 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
商务邀请函
2015/01/30 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle