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 validate.js表单验证的基本用法入门
May 13 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
浏览器兼容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 Array交叉表实现代码
2010/08/05 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python单链表的简单实现方法
2014/09/23 Python
解决Python传递中文参数的问题
2015/08/04 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
教师自荐信范文
2013/12/09 职场文书
企业门卫岗位职责
2013/12/12 职场文书
素食餐饮项目创业计划书
2014/02/02 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
使用Django实现商城验证码模块的方法
2021/06/01 Python