扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery表单验证的代码怎么写
  • 221

0
分享到

jQuery表单验证的代码怎么写

2024-04-02 19:04:59 221人浏览 安东尼
摘要

这篇文章主要介绍“Jquery表单验证的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。 jQu

这篇文章主要介绍“Jquery表单验证的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。

jQuery基础之表单验证

在使用jquery-validate.js插件时可以做一些初始化配置
在初始化jquery-validate.js对象的时候，将外部的一些配置和该插件内部的一些默认配置合并在一起，如果有相同的配置，前者覆盖后者（默认）的配置

// Constructor for validator
$.validator = function( options, fORM ) {
    this.settings = $.extend( true, {}, $.validator.defaults, options );
    this.currentForm = form;
    this.init();
};

rules的格式

标准格式是 key为字符串，value为对象字面直接量

rules : {
    username: {
        required: true,
        minlength: 2
   }
}

也可以是
key为字符串，value也为特定的字符串（“required”）

ulus: {
    username: "required"
}

在插件中会将上面格式调整为：{required:true}的形式。从下面代码可以看出对于usernname:”minlength”就不适用了，它会把它变成{minlength:true}这规则明显不合适

// Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
    normalizeRule: function( data ) {
        if ( typeof data === "string" ) {
            var transformed = {};
            $.each( data.split( /\s/ ), function() {
                transformed[ this ] = true;
            } );
            data = transformed;
        }
        return data;
    }

jquery-validate.js将这些规则解析后放到rules这个对象用以供校验时访问

插件事件监听处理

在指定的元素上添加事件监听

$( this.currentForm )
                .on( "focusin.validate focusout.validate keyup.validate",
                    ":text, [type='passWord'], [type='file'], select, textarea, [type='number'], [type='search'], " +
                    "[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], " +
                    "[type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'], " +
                    "[type='radio'], [type='checkbox'], [contenteditable], [type='button']", delegate )

                // Support: Chrome, oldIE
                // "select" is provided as event.target when clicking a option
                .on( "click.validate", "select, option, [type='radio'], [type='checkbox']", delegate )

上面的监听事件看起来很奇怪，用空格分隔，外加命名空间，如果不了解on的这些使用方法可以参考Query.on() 函数详解。之前focusin，focusout，keyup都是标准事件，之前一直以为focusin与focusout是自定义的事件，这里需要注意一下。
监听函数处理

function delegate( event ) {

                // Set form expando on contenteditable
                if ( !this.form && this.hasAttribute( "contenteditable" ) ) {
                    this.form = $( this ).closest( "form" )[ 0 ];
                }

                var validator = $.data( this.form, "validator" ),
                    eventType = "on" + event.type.replace( /^validate/, "" ),
                    settings = validator.settings;
                if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
                    settings[ eventType ].call( validator, this, event );
                }
            }

在插件中的settings放置了事件处理函数（settings[ eventType ].call( validator, this, event );，也就是在defaults中定义的onfocusin，onfocusout，onkeyup，onclick，highlight，unhighlight事件，因为在defaults中所以可以在外部重写这些事件，做一些定制样式，这点会在最后重新封装一个适合自己的表单校验插件）

自定义事件

现在仔细探究一下这些自定义事件在插件中是如何工作的

先看一下jQuery提供的一个trigger() 方法

trigger() 方法触发被选元素的指定事件类型。

格式：$(selector).trigger(event,[param1,param2,…])

event 必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,…] 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

注意到了trigger可以触发bind函数绑定的事件（bind现在用on取代），也就是说只要我在on中定义一些自定义的事件，都是可以通过trigger触发

例子-trigger

<!DOCTYPE html>
<html>
<head>
    <title>JQuery-validation demo | Bootstrap</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.css" />

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
</head>
<body>
<div class="listener">
    <input type="text" />
    <p class="validate"></p>
</div>
<script type="text/javascript">
    $(".listener").on("customizeEvent otherEvent",".validate,[type='text']",function() {
        alert("complete some logical codes here");
    })
    $(".validate").trigger("customizeEvent");
    $("[type='text']").trigger("customizeEvent");
    $("[type='text']").trigger("otherEvent");
</script>
</body>
</html>

上面的代码中on的第一个参数有两种事件，使用space隔开（这样两种事件都会绑定指定的事件处理函数），第二个参数指定了可以触发这个自定义事件的一些元素（满足选择器[type=&rsquo;text&rsquo;]，validate的元素），第三个参数是指定使用trigger触发这些事件时执行的处理函数
在接下来执行事件的触发，从代码中可以看到我选择对两个元素触发了不同的事件。

插件表单submit监听
插件绑定了submit的监听事件（.validate为命名空间），当我们通过$(“form”).submit() 或直接点击type=“submit”(input , button可以指定type=“submit”)触发submit事件时，会执行绑定好的处理函数

例子-绑定submit

this.on( "submit.validate", function( event )

// Prevent submit for invalid forms or custom submit handlers
                if ( validator.cancelSubmit ) {
                    validator.cancelSubmit = false;
                    return handle();
                }
                if ( validator.form() ) {   //校验表单成功
                    if ( validator.pendingRequest ) {
                        validator.formSubmitted = true;
                        return false;
                    }
                    return handle();
                } else {
                    validator.focusInvalid();
                    return false;
                }

cancelSubmit

cancelSubmit 是validator对象的成员属性，当满足选择器”：submit”（input，button 的type为submit或者button没有指定类型多数浏览器会把button当做类型为 submit 的按钮）的按钮触发点击事件时，会查看这个按钮上是否包含class为“cancel”或者有formnovalidate=“formnovalidate”属性，如果按钮存在其中一种，那么就不会进行表单校验直接提交form表单（设置validator.cancelSubmit=true）。

validator.form()
使用validator.form()进行表单元素校验，如果为true，判断validator.pendingRequest是否为true，如果是则不提交form，如果false则执行handle函数（handle执行的是submitHandler（）的处理）

submitHandler
插件可以在外部配置submitHandler处理函数，它的意思就是在form表单提交时可以做一些额外的处理，并通过返回true，false来决定表单是否提交。

function handle() {   //提交表单
                    var hidden, result;
                    if ( validator.settings.submitHandler ) {
                        if ( validator.submitButton ) {

                            // Insert a hidden input as a replacement for the missing submit button
                            hidden = $( "<input type='hidden'/>" )
                                .attr( "name", validator.submitButton.name )
                                .val( $( validator.submitButton ).val() )
                                .appendTo( validator.currentForm );
                        }
                        result = validator.settings.submitHandler.call( validator, validator.currentForm, event );
                        if ( validator.submitButton ) {

                            // And clean up afterwards; thanks to no-block-scope, hidden can be referenced
                            hidden.remove();
                        }
                        if ( result !== undefined ) {
                            return result;
                        }
                        return false;
                    }
                    return true;
                }

生成一个hidden的input隐藏域，在执行完submitHandler以后移除，没能明白这里的意图。 执行submitHandler后会有一个返回结果（true | false | undefined）,如果自定义的submitHandler没有return返回则结果是undefined,这样导致handle（）结果为false，表单不会被提交

插件表单校验的规则
email

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
1
url

/^(?:(?:(?:Https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i
1
时间

!/Invalid|NaN/.test( new Date( value ).toString()
1
电话号码

/^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test( value );
1
数字

/^\d+$/.test( value )
1
minlength

minlength: function( value, element, param ) {
var length = $.isArray( value ) ? value.length : this.getLength( value, element );
return this.optional( element ) || length >= param;
},

关于“jQuery表单验证的代码怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网JavaScript频道，小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: jQuery表单验证的代码怎么写

本文链接: https://lsjlt.com/news/91513.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jQuery表单验证的代码怎么写
    这篇文章主要介绍“jQuery表单验证的代码怎么写”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。 jQu...
    99+
    2024-04-02
  • jquery表单验证怎么写
    在前端开发中，表单验证是必不可少的一项技能。表单验证可以保证用户输入的数据的正确性和合法性，有效地减少了数据错误的概率，给用户带来良好的体验。本文将介绍如何使用jQuery对表单进行验证。框架与插件在使用jQuery对表单进行验证时，我们可...
    99+
    2023-05-25
  • 如何运用jQuery写的验证表单
    这篇文章主要介绍了如何运用jQuery写的验证表单，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。//运用jQuery写的验证表单<!D...
    99+
    2024-04-02
  • 如何用jQuery重写表单验证
    这篇文章主要讲解了“如何用jQuery重写表单验证”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用jQuery重写表单验证”吧！前面我们曾介绍过使用jQ...
    99+
    2024-04-02
  • jQuery怎么实现表单验证
    这篇文章将为大家详细讲解有关jQuery怎么实现表单验证，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体代码如下所示：<script type=&quo...
    99+
    2024-04-02
  • java验证码代码怎么写
    以下是一个简单的Java验证码生成代码示例：```javaimport java.util.Random;public class ...
    99+
    2023-08-09
    java
  • html验证码代码怎么写
    html验证码是一种用于防止垃圾邮件的验证方法，它显示一个扭曲或难以读取的字符序列，用户必须手动输入才能验证自己不是机器人。 HTML验证码代码 什么是HTML验证码？ HTML验证码...
    99+
    2024-05-16
  • jQuery实现表单验证
    使用jQuery实现表单验证，供大家参考，具体内容如下 register.html <!DOCTYPE html> <html lang="en"> &l...
    99+
    2024-04-02
  • jquery表单验证插件validation怎么用
    这篇文章主要为大家展示了“jquery表单验证插件validation怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery表单验证插件validat...
    99+
    2024-04-02
  • jQuery表单验证插件怎么使用
    要使用jQuery表单验证插件，你需要按照以下步骤进行操作：1. 引入jQuery库和jQuery表单验证插件的源文件。在HTML文...
    99+
    2023-10-18
    jQuery
  • jquery.validate分组验证代码怎么写
    要实现分组验证，你可以使用jQuery Validation插件的groups选项。这个选项允许你将多个表单字段分成一组，并将它们合...
    99+
    2023-10-22
    jquery
  • jQuery如何实现表单验证
    这篇文章主要为大家展示了“jQuery如何实现表单验证”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现表单验证”这篇文章吧。具体代码如下所示：...
    99+
    2024-04-02
  • jQuery实现表单验证功能
    jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证 如下图 别忘了引入jQuery框架！！！ 话不多说直接先上jQuery部分代码： <script type...
    99+
    2024-04-02
  • ajax中怎么利用 jquery 异步表单验证
    这篇文章将为大家详细讲解有关ajax中怎么利用 jquery 异步表单验证，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。 文件...
    99+
    2024-04-02
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下：1. 添加jQuery库文件到HTML页面中：```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • 怎么用JQUERY写注册验证
    这篇文章将为大家详细讲解有关怎么用JQUERY写注册验证，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1 兼容IE6782 适合网站开发html：<script s...
    99+
    2024-04-02
  • JQuery异步post上传表单数据的代码怎么写
    今天小编给大家分享一下JQuery异步post上传表单数据的代码怎么写的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。HTML...
    99+
    2023-06-29
  • jQuery表单验证之密码确认的示例分析
    这篇文章给大家分享的是有关jQuery表单验证之密码确认的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。代码：<!DOCTYPE html> <...
    99+
    2024-04-02
  • jQuery如何实现验证表单密码一致性
    这篇文章将为大家详细讲解有关jQuery如何实现验证表单密码一致性，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。jQuery 脚本<script type...
    99+
    2024-04-02
  • jquery怎么实现一个简单的验证码功能
    随着网络的不断发展，验证码已经成为了互联网中不可或缺的一部分。验证码通常用于防止网站被恶意攻击，防止机器人恶意注册和发送垃圾信息等。本文将介绍如何利用jquery实现一个简单的验证码。一、什么是验证码验证码，全称为“ Completely ...
    99+
    2023-05-14
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作