JQuery插件第二十九个:公司的表单验证

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量618 收藏
点赞数
分类专栏： 表单验证 文章标签： jquery插件 function class input stylesheet javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinet_bridge/article/details/7306714
版权 


(function($) {
    jQuery.fn.groupBsave = function() {
        var errcnt = 0;
        this.each(function() {
            var $err = $(this).next();
            $err.beforeSave({ type: -1 });
            if ($err.attr("ispass") == '1') {
                errcnt += $err.beforeSave({ type: -2, testValue: $(this).val() });
            }
            else if ($(this).val().length <= 0 || $(this).val() == '-1') {
                errcnt += $err.beforeSave({ type: 1 }); $(this).focus();
            }
            else {
                errcnt += $err.beforeSave({ testValue: $(this).val() });
            }
        });
        return errcnt;
    }
})(jQuery);
(function($) {
    jQuery.fn.beforeSave = function(options) {
        var defaults = {
            type: 0, 	           //正确 1错误 -1 清空
            error: "* 必填",  //错误语句
            testValue: ""          //待测值
        }
        var options = $.extend(defaults, options);
        var $obj = this;
        var rtn = 0;
        switch (options.type) {
            case -2:
                if (typeof $obj.attr("vtype") != 'undefined') {
                    var vtype = $obj.attr("vtype");
                    if (options.testValue.length > 0) {
                        //alert(vtype);
                        var vflag = false;
                        switch (vtype) {
                            case "int": vflag = isInteger(options.testValue, $obj);
                                break;
                            case "email": vflag = isEmail(options.testValue, $obj);
                                break;
                            case "str": vflag = isString(options.testValue, $obj);
                                break;
                            case "tel": vflag = isTelephone(options.testValue, $obj);
                                break;
                            case "mob": vflag = isMobile(options.testValue, $obj);
                                break;
                            case "url": vflag = isUri(options.testValue, $obj);
                                break;
                            case "post": vflag = isPost(options.testValue, $obj);
                                break;
                        }
                        if (!vflag) { rtn = 1; }
                    }
                }

                break;
            case -1:
                $obj.css("color", "black");
                $obj.html("");
                break;
            case 0:
                $obj.css("color", "black");
                $obj.html("√");
                if (typeof $obj.attr("vtype") != 'undefined') {
                    var vtype = $obj.attr("vtype");
                    var vflag = false;
                    switch (vtype) {
                        case "int": vflag = isInteger(options.testValue, $obj);
                            break;
                        case "email": vflag = isEmail(options.testValue, $obj);
                            break;
                        case "str": vflag = isString(options.testValue, $obj);
                            break;
                        case "tel": vflag = isTelephone(options.testValue, $obj);
                            break;
                        case "mob": vflag = isMobile(options.testValue, $obj);
                            break;
                        case "url": vflag = isUri(options.testValue, $obj);
                            break;
                        case "post": vflag = isPost(options.testValue, $obj);
                            break;
                    }
                    if (!vflag) { rtn = 1; }
                }

                break;
            case 1:
                $obj.css("color", "red");
                if ($obj.data("error") == null || $obj.data("error") == "") {
                    $obj.html(options.error);
                } else {
                    $obj.html($obj.data("error"));
                }
                rtn = 1;
                break;
        }
        return rtn;
    }
})(jQuery);


function isInteger(obj, errobj) {
    reg = /^[-+]?\d+$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("Please input correct figures");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}

function isEmail(obj, errobj) {
    reg = /^\w{3,}@\w+(\.\w+)+$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("请输入正确的邮箱地址");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}
function isString(obj, errobj) {
    reg = /^[a-z,A-Z]+$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("只能输入字符");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}
function isTelephone(obj, errobj) {
    reg = /^(\d{3,4}\-)?[1-9]\d{6,7}$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("例：021-1000001");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}

function isMobile(obj, errobj) {
    reg = /^(\+\d{2,3}\-)?\d{11}$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("请输入正确移动电话");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}
function isUri(obj, errobj) {
    reg = /^http:\/\/[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("请输入正确的inernet地址");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}

function isPost(obj, errobj) {
    reg = /^[1-9]\d{5}$/;
    var flag = false;
    if (!reg.test(obj)) {
        errobj.css("color", "red");
        errobj.html("请输入正确的邮编");
    } else {
        errobj.css("color", "black");
        errobj.html("√");
        flag = true;
    }
    return flag;
}

$(function() {
    var vtypespan = $("span[vtype]");
    vtypespan.each(function() {
        if (typeof $(this).attr("vtype") != 'undefined') {
            var vtype = $(this).attr("vtype");
            var vobj = $(this);
            var input = $(this).prev();
            switch (vtype) {
                case "int":
                    input.keyup(function() {
                        return isInteger(input.val(), vobj);
                    });
                    break;
                case "email":
                    input.keyup(function() {
                        return isEmail(input.val(), vobj);
                    });
                    break;
                case "str":
                    input.keyup(function() {
                        return isString(input.val(), vobj);
                    });
                    break;
                case "tel":
                    input.keyup(function() {
                        return isTelephone(input.val(), vobj);
                    });
                    break;
                case "mob":
                    input.keyup(function() {
                        return isMobile(input.val(), vobj);
                    });
                    break;
                case "url":
                    input.keyup(function() {
                        return isUri(input.val(), vobj);
                    });
                    break;
                case "post":
                    input.keyup(function() {
                        return isPost(input.val(), vobj);
                    });
                    break;
            }
        }
    });
})




<!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="Content-Type" content="text/html; charset=gb2312" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="../js/jQuery.groupBsave.js" type="text/javascript"></script>
    <script type="text/javascript">
        function funcSave() {
            $("#dSortid").data("error", "请填写排序ID");
            $("#dClassName").data("error", "请填写类别名称");
            var sign = $(".a09").groupBsave();
            if (sign > 0) {
                return false;
            }
        }

        $(function() {
            $("#BtnAdd").click(function() {
                return funcSave();
            })
        });
    </script>
    
</head>
<body class="bodybg01">
    <form name="form1" method="post"  id="form1">

    <input type="hidden" name="ClasSN" id="ClasSN" />
    <div id="content">
        <table width="100%" class="a01">
            <tr>
                <td width="8%" style="text-align: right;">
                    当前位置：
                </td>
                <td width="3%">
                    首页
                </td>
                <td width="1%">
                    >
                </td>
                <td width="5%">
                    <a href="#">客户备案</a>
                </td>
                <td width="1%">
                    >
                </td>
                <td>
                    客户分类管理
                </td>
            </tr>
        </table>
        <table width="100%" class="a02">
            <tr>
                <td width="5%" style="text-align: right;">
                    <img src="../images/tubiao.jpg" alt=" " />
                </td>
                <td width="1%">
                     
                </td>
                <td width="94%">
                    <strong id="StrongTitle">客户分类管理新增</strong>
                </td>
            </tr>
        </table>
        <div class="shdlr">
            <table width="100%" class="a03">
                <tr>
                    <td width="10%" style="text-align: right;">
                        排序ID：
                    </td>
                    <td width="23%">
                        <input name="Sortid" type="text" id="Sortid" class="a09" />
                        <span id="dSortid" ></span>
                    </td>
                    <td style="text-align: right;">
                         
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        类别名称：
                    </td>
                    <td>
                        <input name="ClassName" type="text" id="ClassName" class="a09" />
                        <span id="dClassName" ></span>
                    </td>
                    <td style="text-align: right;" >
                         
                    </td>
                </tr>
            </table>
            <table width="100%" style="margin-bottom: 20px;">
                <tr>
                    <td width="10%">
                         
                    </td>
                    <td width="10%">
                            <a id="BtnAdd" href="javascript:void(0);"><img src="../images/querentijiao.jpg" /></a>
                    </td>
                    <td width="10%">
                        <a href="javascript:history.go(-1);" >
                            <img src="../images/quxiaofanhui.jpg" alt=" " /></a>
                    </td>
                    <td width="70%">
                         
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

 
chinet_bridge
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
15天学会JQuery
11-09
### 第二章：jQuery选择器 jQuery选择器是其核心功能之一，它们允许我们高效地选取DOM元素。本章将深入讲解CSS选择器、ID选择器、类选择器、属性选择器以及伪类选择器等，让你熟练掌握元素的选取技巧。 ### 第三章...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
通过JQuery增加伪元素:before,:after的方法
m0_46530861的博客
04-06 4612
今天在做网站视频的时候发现巴萨视频的进度条下方有它自己的logo，随着进度条的显示，隐藏变化。 在给网站添加好播放器后发现他视频进度条下方的logo是伪元素，而我在网站上添加的播放器的进度条是通过JQuery来控制显示和隐藏的，网页的html文件中没有相应的地方可添加。所以网上找教程，一般都是修改样式的。仔细琢磨之后发现其实道理都一样。 下面就来记录一下怎么通过JQuery添加伪元素。 Html代...
jQuery文档操作--append()、prepend()、after()和before()
anqi771129的博客
12-03 154
append(content|fn) 概述 向每个匹配的元素内部追加内容，这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似 参数 content要追加到目标中的内容 function(index, html)返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的...
jQuery的before()方法和after()方法
LLL_liuhui的博客
01-04 4389
before()和after()都有添加的意思，不过一个是添加在被选元素之前，一个是被选元素之后。 before()方法在被选元素之前插入指定内容。 after()方法在被选元素之后插入指定内容。 这是HTML代码所示：<p>这是一个段落</p> <button id="btn1">before</button> <button id="btn2">after</button>jQuery使用
表单验证常用正则表达式
玲曦的博客
09-09 789
用户名正则，4到16位（字母，数字，下划线，减号） var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uPattern.test("caibaojian")); 密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符 var pPattern = /^.*(?=.{6,})(?=.*\d)(?=...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
dearbaba_8520的博客
07-22 265
jQuery框架学习第一天：开始认识jQuery jQuery框架学习第二天：jQuery中万能的选择器 jQuery框架学习第三天：如何管理jQuery包装集 jQuery框架学习第四天：使
jquery validate强大的jquery表单验证插件
u011296285的博客
07-18 306
validate默认的验证规则中文解释： (1)required:true 必输字段 (2)remote:”check.php” 使用ajax方法调用check.php验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 (6)dateISO:true 必须输入正确格式的日期(ISO)
jquery表单验证插件 jquery.form.js
kkwant的博客
07-17 776
Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。1、JQuery框架软件包下载 文件:
利用jQuery.validator来做表单验证，不要太轻松（全攻略）
IT_CREATE的博客
07-05 2047
1、介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件，你可以直接去官网下载，也可以通过菜鸟教程学习和下载该插件 菜鸟教程（jQuery.validator） 2、使用 2.1下载完成后引入相应的js库 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib...
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
GarfieldEr007的专栏
08-27 1821
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Aj
软件工程师_经典收藏50个jQueryMobile开发技巧集萃.docx
07-06
19. **表单验证**：使用jQuery Validation插件进行表单验证，提升用户体验。 20. **使用网格系统**：利用jQuery Mobile的grid系统，轻松创建多列布局。 21. **自定义图标**：添加自定义图标到按钮和工具栏，增强...
15天学会jQuery 15天学会jQuery
01-30
- 表单验证：使用jQuery进行简单的表单验证，提升用户体验。 第九天：jQuery与Ajax库对比 - jQuery与原生Ajax：对比jQuery的$.ajax方法与原生XMLHttpRequest对象的使用，了解优缺点。 - jQuery与其他库：简述jQuery...
Next.js静态导出与动态路由优化
天涯学馆
07-20 1055
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 417
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 864
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1010
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
jQuery表单验证插件详解：快速验证输入合法性
其中，jquery.validate.js 是一个非常流行的表单验证插件，借助 JQuery 的优势，我们可以快速验证一些常见的输入，并且可以自己扩充自己的验证方法。 表单验证是 Web 开发中非常重要的一步，因为它可以确保用户输入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值