使用 纯JQuery 进行 表单 验证

简介: 对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个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的流程图进行演示吧,思路如下
Created with Raphaël 2.1.0用户名符合规范?邮箱是否符合规范?表单验证结束报错提示输出报错提示输出yesnoyesno
  • 使用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>

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

目录
相关文章
|
2天前
|
JavaScript 数据安全/隐私保护
jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)
9 3
|
2月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
65 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
2月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
31 0
|
4月前
|
JavaScript
jQuery如何验证复选框是否选中
jQuery如何验证复选框是否选中
22 0
|
5月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
40 4
jQuery会员中心安全修改表单特效
|
12月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
44 0
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
87 0
|
5月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
68 0
|
5月前
|
JavaScript 数据安全/隐私保护
jquery正则表达式验证手机号密码和姓名字段
jquery正则表达式验证手机号密码和姓名字段
|
11月前
|
JavaScript 新能源
jQuery验证车牌号(含新能源车牌)
jQuery验证车牌号(含新能源车牌)
52 1