使用纯JQuery 进行表单验证

对于JavaScript而言，进行表单数据的验证可谓是很有必要的，而且一般我们都会在网页上先进行一下表单验证，然后服务器端再次进行验证，来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表单验证。

本文的大纲为：

制作表单

要想实现表单验证，前提是得有个表单了。

<form method="post" action="">
            <fieldset>
                <legend>表单详情</legend>
                <div class="int">
                    <label for="username">用户名：</label>
                    <input type="text" id="username" class="required" />
                </div>
                <div class="int">
                    <label for="email">邮&nbsp;箱：</label>
                    <input type="email" id="email" class="required">
                </div>
                <div class="int">
                    <label for="persininfo">个人资料</label>
                    <textarea type="text" id="personinfo" ></textarea>
                </div>
                <div class="sub">
                    <input type="submit" value="提交" id="send">
                    <input type="reset" id="res">
                </div>
            </fieldset>
        </form>

得到的界面如下：

小红点？

想必眼睛雪亮的你一经发现了后面的小红点，这就是我们定义了input标签里面required类属性值的原因，这样可以显得我们的表单更加的人性化，更加的美观。

使用到的JQuery代码如下：

    // 首先添加非空验证小红点
    $("form :input.required").each(function(){
        var $required = $("<strong class='high'>*</strong>");
        $(this).parent().append($required);
    });

正式的表单验证

使用markdown的流程图进行演示吧，思路如下

使用JQuery也是比较简单的，只要是思路有了，剩下的就是些语法问题。

// 下面添加每个元素的特定的验证规则
        $("form :input").blur(function(){
            var $parent = $(this).parent();
            // 验证用户名
            if($(this).is("#username")){
                if(this.value=="" || this.value.length<6){
                    var errmsg = "请至少输入6位的用户名！";
                    $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    var rightmsg = "输入数据正确!";
                    $parent.append("<span>"+rightmsg+"</span>");
                }
            }

            // 验证邮箱
            if($(this).is("#email")){
                if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    var errmsg = "请输入正确的邮箱格式！";
                    $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    var rightmsg = "输入正确！";
                    // $parent.append("<span>"+rightmsg+"</span>");
                    $parent.append("<span>"+rightmsg+"</span>");
                }
            }
        });

界面效果

优化效果

现在出错提示已经有了，但是如果我们修正了input标签里面的数据，错误提示仍然会存在，所以我们需要在其失去鼠标焦点的时候将出错的提示语句删掉。所以我们需要为form :input.required标签们添加一个blur事件。

// 失去焦点之后删除之前的数据提示
        $("form :input.required").blur(function(){
            var $parent = $(this).parent();
            // $parent.find(".error").remove();
            if($(this).is("#username")){
                if(this.value=="" || this.value.length<6){
                    // var errmsg = "请至少输入6位的用户名！";
                    // $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    $parent.find(".error").remove();
                }
            }

            // 验证邮箱
            if($(this).is("#email")){
                if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    // var errmsg = "请输入正确的邮箱格式！";
                    // $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    $parent.find(".error").remove();
                }
            }
        })

实现的效果如下：

完整的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单的选项验证</title>
    <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
    <style>
        .int {
            width: 200px;
            padding: 12px;
            background-color: silver;
        }
        .container {
            width: 240px;
            align-content: center;
            display: block;
        }
        .high {
            color: red;
        }
    </style>
</head>
<body>
    <div align="center" class="container">
        <form method="post" action="">
            <fieldset>
                <legend>表单详情</legend>
                <div class="int">
                    <label for="username">用户名：</label>
                    <input type="text" id="username" class="required" />
                </div>
                <div class="int">
                    <label for="email">邮&nbsp;箱：</label>
                    <input type="email" id="email" class="required">
                </div>
                <div class="int">
                    <label for="persininfo">个人资料</label>
                    <textarea type="text" id="personinfo" ></textarea>
                </div>
                <div class="sub">
                    <input type="submit" value="提交" id="send">
                    <input type="reset" id="res">
                </div>
            </fieldset>
        </form>
    </div>
    <script>
        // 首先添加非空验证小红点
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'>*</strong>");
            $(this).parent().append($required);
        });

        // 下面添加每个元素的特定的验证规则
        $("form :input").blur(function(){
            var $parent = $(this).parent();
            // 验证用户名
            if($(this).is("#username")){
                if(this.value=="" || this.value.length<6){
                    var errmsg = "请至少输入6位的用户名！";
                    $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    var rightmsg = "输入数据正确!";
                    $parent.append("<span>"+rightmsg+"</span>");
                }
            }

            // 验证邮箱
            if($(this).is("#email")){
                if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    var errmsg = "请输入正确的邮箱格式！";
                    $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    var rightmsg = "输入正确！";
                    // $parent.append("<span>"+rightmsg+"</span>");
                    $parent.append("<span>"+rightmsg+"</span>");
                }
            }
        });

        // 失去焦点之后删除之前的数据提示
        $("form :input.required").blur(function(){
            var $parent = $(this).parent();
            // $parent.find(".error").remove();
            if($(this).is("#username")){
                if(this.value=="" || this.value.length<6){
                    // var errmsg = "请至少输入6位的用户名！";
                    // $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    $parent.find(".error").remove();
                }
            }

            // 验证邮箱
            if($(this).is("#email")){
                if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    // var errmsg = "请输入正确的邮箱格式！";
                    // $parent.append("<span class='error'>"+errmsg+"</span>");
                }else{
                    $parent.find(".error").remove();
                }
            }
        })
    </script>
</body>
</html>

在实际的开发中，表单验证是非常的实用的，希望这段文字能帮到需要帮助的人。

使用纯JQuery 进行表单验证的更多相关文章

纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
[转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
jQuery的表单验证
jQuery的表单验证直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
Jquery 实现表单验证，所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...

随机推荐

python day two,while
一.运算符号算数运算符:+ .-.*././/(取整除).%(去余).** 比较运算符:>.< .>=.<=.== 赋值运算符:=.+=.-=./=.%=.**= 逻辑预算符 ...
将python代码打印成pdf
将python代码打印成pdf,打印出来很丑,完全不能看. mac下:pycharm 编辑器有print的功能,但是会提示: Error: No print service found. 所以需要一个 ...
spring data jpa 组合条件查询封装
/** * 定义一个查询条件容器 * @author lee * * @param <T> */ public class Criteria<T> implements Spe ...
[BZOJ 4916]神犇和蒟蒻
Description 很久很久以前,有一只神犇叫yzy; 很久很久之后,有一只蒟蒻叫lty; Input 请你读入一个整数N;1<=N<=1E9,A.B模1E9+7; Output 请你 ...
[HNOI 2017]单旋
Description H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能多,效率高,掌握这种数据结构成为了 H 国的 ...
【 lca倍增模板】
题目描述对于 n(<100000)个点 n-1 条掉权值的边,有 m 个询问,每条询问求两个结点之间的路径上边权的最小值输入第一行 n,表示结点个数,接下来 n-1 行,每行 a b w ...
有源汇上下界可行流(POJ2396)
题意:给出一个n*m的矩阵的每行和及每列和,还有一些格子的限制,求一组合法方案. 源点向行,汇点向列,连一条上下界均为和的边. 对于某格的限制,从它所在行向所在列连其上下界的边. 求有源汇上下界可行流 ...
SpringCloud学习之soa基础
一.soa简单介绍 1)面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.SOA是解决复杂业务模块,提高扩展性,维护性,可伸缩 ...
Redis wind7 安装
下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这里我们下载 Red ...
(转)Linux下C++开发初探
1.开发工具 Windows下,开发工具多以集成开发环境IDE的形式展现给最终用户.例如,VS2008集成了编辑器,宏汇编ml,C /C++编译器cl,资源编译器rc,调试器,文档生成工具, nmak ...

使用 纯JQuery 进行 表单 验证