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
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
JavaScript实现优先级队列
Dec 06 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
php中define用法实例
2015/07/30 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python实现TCP文件传输
2020/03/20 Python
python中altair可视化库实例用法
2021/01/26 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
办理居住证介绍信
2014/01/15 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
家长会主持词开场白
2015/05/29 职场文书
百家讲坛观后感
2015/06/12 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书