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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
javascript常用功能汇总
Jul 05 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
react redux入门示例
2018/04/19 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
详解python:time模块用法
2019/03/25 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
用Python开发app后端有优势吗
2020/06/29 Python
家长对老师的感言
2014/03/11 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
关于学习的决心书
2015/02/05 职场文书
会计试用期自我评价
2015/03/10 职场文书
宇宙与人观后感
2015/06/05 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android