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库还是自己写代码?
Jan 28 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
在JavaScript中使用timer示例
May 08 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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的网址
2006/11/25 PHP
php生成随机颜色的方法
2014/11/13 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
深入了解JS之作用域和闭包
2020/06/16 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
幼教简历自我评价
2014/01/28 职场文书
施工安全保证书
2015/05/09 职场文书
八月迷情观后感
2015/06/11 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android