对于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 进行 表单 验证的更多相关文章

  1. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  4. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  5. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  6. 【锋利的jQuery】表单验证插件踩坑

    和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...

  7. jquery实现表单验证简单实例

    /* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...

  8. jQuery的表单验证

    jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. 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 ...

随机推荐

  1. [USACO09OPEN]滑雪课Ski Lessons

    题目描述 Farmer John wants to take Bessie skiing in Colorado. Sadly, Bessie is not really a very good sk ...

  2. 栅栏(fence)

    [问题描述]小 v 家有一条栅栏,由 n 个木板顺序组成,第 i 个木板的高度是 Ai.现在小镇上流行在栅栏上画矩形,所以小 v 也要在自家的栅栏上画.若要在区间[x,x+k-1]这个区间画一个宽度为 ...

  3. AtCoder Grand Contest 002 D - Stamp Rally

    Description We have an undirected graph with N vertices and M edges. The vertices are numbered 1 thr ...

  4. ubuntu 16.04常见错误--Could not get lock /var/lib/dpkg/lock解决

    我的博客 ubuntu常见错误--Could not get lock /var/lib/dpkg/lock解决 通过终端安装程序sudo apt-get install xxx时出错: E: Cou ...

  5. 笔记14 Hello Spring MVC

    搭建一个SpringMVC所需要的包: 1.创建MySpringMVC项目,使用dynamic web project的方式. 2.导入jar包,放到/WebContent(WebRoot)/WEB- ...

  6. day5 liaoxuefeng---访问数据库、web开发、异步IO

    一.访问数据库 二.web开发 三.异步IO

  7. 数据权限管理中心 - 基于mybatis拦截器实现

    数据权限管理中心 由于公司大部分项目都是使用mybatis,也是使用mybatis的拦截器进行分页处理,所以技术上也直接选择从拦截器入手 需求场景 第一种场景:行级数据处理 原sql: select ...

  8. 忘记Jenkins管理员密码的解决办法

    一.admin密码未更改情况 1.进入\Jenkins\secrets目录,打开initialAdminPassword文件,复制密码: 2.访问Jenkins页面,输入管理员admin,及刚才的密码 ...

  9. node之子线程child_process模块

    node.js是基于单线程模型架构,这样的设计可以带来高效的CPU利用率,但是无法却利用多个核心的CPU,为了解决这个问题,node.js提供了child_process模块,用于新建子进程,子进程的 ...

  10. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...