jquery数据验证插件(自制,简单,练手)实例代码

代码如下:

(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>

(0)

相关推荐

  • 常用的Javascript数据验证插件

    原生Javascript电话号码验证,邮件验证,身份证验证.使用时传入要验证的字符串,返回ture代表符合,返回false代码不符合. 使用: document.getElementById("btnPhone").onclick=function(){ alert(ValidationHandler.IsPhone(document.getElementById("phoneInput").value)==true?"合法":"不合法

  • jquery数据验证插件(自制,简单,练手)实例代码

    复制代码 代码如下: (function($) {    var defaults = {        bugColor: '#FFCCCC', //数据有误的时候文本框颜色        color: 'white', //数据正确时候文本框颜色        type: "alert", //数据错误时候提示方式 alert 弹出框方式 text 赋值span html        msg: "Msg", //数据有误的时候提示内容        ResOj

  • jquery validation验证身份证号,护照,电话号码,email(实例代码)

    validata.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

  • jquery.simple.tree插件 更简单,兼容性更好的无限树插件

    效果如下: 选择: 拖拽: jquery.simple.tree.官网地址: http://news.kg/wp-content/uploads/tree/(貌似已经打不开),不过因为操作比较简单,所以我们暂且用之. 前面讲过jquery EasyUI Tree插件,简单易用,但经过测试仍有诸多缺点, 例如: 1.兼容IE8的AJAX有问题. 2.如果异步返回数据较慢,将可能导致加载失败. 3.我们只使用其中的Tree功能,但其体积实在有点庞大.... 而我们需要的是,兼容性好,异步,体积小(用

  • javascript常见数据验证插件大全

    原生Javascript电话号码验证,邮件验证,身份证验证.使用时传入要验证的字符串,返回ture代表符合,返回false代码不符合. 使用: document.getElementById("btnPhone").onclick=function(){ alert(ValidationHandler.IsPhone(document.getElementById("phoneInput").value)==true?"合法":"不合法

  • jQuery滚动条美化插件nicescroll简单用法示例

    本文实例讲述了jQuery滚动条美化插件nicescroll简单用法.分享给大家供大家参考,具体如下: 你是否遇到过这种情况:想要在网页中嵌入div块并且局部滚动,但滚动条太难看啦!!! 使用jquery.nicescroll来美化滚动条吧(so easy!!): 首先:下载jquery.nicescroll.js.百度一下哦!!!(或者像本例所示直接使用CDN地址) 然后引入jquery.nicescroll.js,并且使用: <!DOCTYPE html> <html> <

  • jQuery添加options点击事件并传值实例代码

     说明: 最近刚接了一个项目,其中有项目需求要求根据选择不同店铺选项,上送不同id值,展示不同商品列表 先给大家展示下实现效果图:如果大家感兴趣对此很感兴趣,可以参考下实现代码. var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}"; $.ajax({ type : "post", dataType : "json", cache : false, url : "..

  • C++ 中实现把EXCEL的数据导入数据库(ACCESS、MSSQL等)实例代码

    C++ 中实现把EXCEL的数据导入数据库(ACCESS.MSSQL等)实例代码 在把EXCEL的数据导入数据库之前,先进行一些简单的准备工作: 1.把数据所在的EXCEL表另保存为DBF 4格式. 2.打开BCB,添加AdoTable(改名为DBFTable)和DataSource这两个控件 OK,准备工作,到此结束,剩下的就是打代码了 1.在Form_Load()事件中,加入以下代码: AnsiString filepath=ExtractFilePath(FileName); //File

  • Django+mysql配置与简单操作数据库实例代码

     第一步:下载mysql驱动 cmd进入创建好的django项目目录:使用命令 pip install mysqlclient 等待安装成功! 第二步:在settings.py中配置mysql连接参数(没有mysql的先装mysql) DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': '数据库名(你得先在mysql中创建数据库)', 'USER':'mysql用户名(如root)', 'PASSWOR

  • MySQL与Mongo简单的查询实例代码

    首先在这里我就不说关系型数据库与非关系型数据库之间的区别了(百度上有很多)直接切入主题 我想查询的内容是这样的:分数大于0且人名是bob或是jake的总分数 平均分数 最小分数 最大分数 计数 举这个实例来试试用MySQL和mongodb分别写一个查询 首先我们先做一些准备工作 MySQL的数据库结构如下 CREATE TABLE `new_schema`.`demo` ( `id` INT NOT NULL, `person` VARCHAR(45) NOT NULL, `score` VAR

随机推荐