jquery数据验证插件(自制,简单,练手)实例代码_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>

时间: 2024-12-05 14:49:19

jquery数据验证插件(自制,简单,练手)实例代码_jquery的相关文章

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

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设置单选按钮radio选中/不可用的实例代码_jquery

因为本 part 是"jQuery日常使用篇",所以都是由具体需求出发,总结需要用到的知识点.代码写得未必很好,达到目标就好.那么我们先来看看这次的需求:色块模式基于彩色模式,即开了彩色才能开色块,彩色处于关闭的时候色块不可用,开启彩色时色块radio可用,关闭彩色时如果色块处于开的话需要把它关掉,大概就这样. 我们先来看看演示效果: 我们接下来看看jQuery对单选按钮 radio 的操作. 1. 彩色处于关闭的时候色块不可用 需要两步,当页面打开时,检测如果彩色关闭的话,让色块的&

jquery 实现轮播图详解及实例代码_jquery

轮播图: 接触jquery也有一段时间了,今天刚好利用轮播图来练练手.博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较.轮播图的效果可以点击如下链接查看:http://sandbox.runjs.cn/show/t07kscph jquery做轮播图的例子: html部分代码: <!DOCTYPE html> <html> <hea

Jquery同辈元素选中/未选中效果的实例代码_jquery

复制代码 代码如下: <!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 runat="server"&

jquery交替变换颜色的三种方法 实例代码_jquery

复制代码 代码如下: <!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-equiv="

Jquery多选框互相内容交换的实例代码_jquery

复制代码 代码如下: <head runat="server">    <title>无标题页</title>    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>    <script type="text/javascript">        $(docume

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

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

javascript常见数据验证插件大全_javascript技巧

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

常用的Javascript数据验证插件_基础知识

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