首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery Validator - 如何验证非表单项?

非表单项的验证可以通过jQuery Validation插件实现。以下是一个简单的示例:

  1. 首先,确保已经在项目中引入了jQuery和jQuery Validation插件。可以通过以下方式引入:
代码语言:html<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
复制
  1. 创建一个HTML元素,用于显示验证错误信息:
代码语言:html
复制
<div id="error-message"></div>
  1. 在JavaScript中,定义一个验证规则,并将其应用于非表单项:
代码语言:javascript
复制
$(document).ready(function() {
  // 定义验证规则
  var rules = {
    nonFormItem: {
      required: true,
      email: true
    }
  };

  // 定义错误信息
  var messages = {
    nonFormItem: {
      required: "请输入非表单项",
      email: "请输入有效的电子邮件地址"
    }
  };

  // 应用验证规则
  var validator = $("#nonFormItem").validate({
    rules: rules,
    messages: messages,
    errorElement: "span",
    errorPlacement: function(error, element) {
      $("#error-message").html(error);
    },
    success: function(error) {
      error.html("");
    }
  });

  // 监听非表单项的更改事件
  $("#nonFormItem").on("change", function() {
    validator.element("#nonFormItem");
  });
});

在这个示例中,我们定义了一个名为nonFormItem的验证规则,该规则要求输入非表单项的值并且该值必须是一个有效的电子邮件地址。然后,我们将这个验证规则应用于一个名为#nonFormItem的HTML元素上,并在更改事件中触发验证。

这样,我们就可以在非表单项上实现验证功能,并在验证失败时显示错误信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery.validator插件:密码正则验证的使用方法

jQuery.validator 是比较常用的一个表单验证插件,有20多种验证方式,下面介绍一下 jQuery.validator 正则验证的使用方法。...jQuery.validator.addMethod ( )  语法: jQuery.validator.addMethod( name, method [, message ] ) jQuery.validator...添加自定义方法,验证密码正则: jQuery.validator.addMethod("isPassword", function(value, element) {//密码验证         var...); 引用这个方法: rules: {     password: {         isPassword: true,     }, }, 具体代码如下: $(function () {     jQuery.validator.addMethod...                minlength: "请输入6-20位包含字母、数字、下划线的密码",             },         }     }); }) 声明:本文由w3h5原创,转载请注明出处:《jQuery.validator

1.4K20
  • jQuery最方便的前端验证方式2种(验证与比较验证)

    jQuery最方便的前端验证方式2种(验证与比较验证) 目录 jQuery最方便的前端验证方式2种(验证与比较验证) 使用的jQuery地址: 验证需求: 1、验证 2、比较验证 jQuery...、检测数字、判断是否为数字、只能输入数字 只能输入2位小数的浮点数 只能输入英文字符和数字 ---- 使用的jQuery地址: https://code.jquery.com/jquery-3.4.1...验证需求: 1、验证 当用户没有输入用户名就提交的时候【阻止提交】并提示相应文字。.../jquery-3.4.1.min.js"> <...jQuery验证列表 字符串长度限制、判断字符长度 、js 限制输入、限制不能输入、textarea 长度限制 源码 function test() { if

    2.2K40

    【工具】15个非常实用的 JavaScript 表单验证

    这使你可以根据需要进行验证。ApproveJs公开一个方法value(),让你决定何时验证值以及如何显示错误。如果你想掌控自己或像我一样有点强迫症,那么ApproveJs非常适合你。 ?...2、Validator.js 地址:https://github.com/validatorjs/validator.js validateator.js是一个字符串验证器和消毒剂库。...该脚本附带了一堆预定义的规则,但是如何验证表单中的每个输入都由您决定。使用自定义功能,您可以连接脚本并提供自己的验证规则和错误消息。 ?...page=installation JS Auto Form Validator是一个易于设置的表单验证脚本,它使您可以使用现成的JavaScript类来处理整个表单验证过程。...该脚本允许您将某些表单元素指定为“必需”或“必需”,以及它们具有的特定类型:文本,密码,数字,邮政编码等。

    6.1K20

    【转】jQuery验证控件jquery.validate.js使用说明+中文API

    ("Please enter a value greater than or equal to {0}.") }, 如需要修改,可在js代码中加入: jQuery.extend(jQuery.validator.messages...jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0}...和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为{0} 的值"), min: jQuery.validator.format("请输入一个最小为...required:function(){}返回为真,时需要验证 后边两种常用于,表单中需要同时填或不填的元素 五、常用方法及注意问题 1.用其他方式替代默认的SUBMIT $().ready(...("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value

    4.7K40

    JQuery学习—JQuery-Validation 使用

    JQuery 的学习之 JQuery—Validate验证功能!...("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format...("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format...required:function(){}返回为真,时需要验证 后边两种常用于,表单中需要同时填或不填的元素 五、常用方法及注意问题 1.用其他方式替代默认的SUBMIT $().ready(function...("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function

    4.6K20

    ASP.NET MVC5+EF6+EasyUI 后台管理系统(33)-MVC 表单验证

    ,请加入以下代码 // [IntRangeExpression(18, 30)] 数字在18与30之间,可以不填写,但填写就进入验证 jQuery.validator.addMethod('...jQuery.validator.addMethod('checkMaxWords', function (value, element, param) { if (strLen(value)...jQuery.validator.addMethod('checkMinWords', function (value, element, param) { if (strLen(value)...JS,否则无法启用前端验证 //双向验证,请加入以下代码 // [IntRangeExpression(18, 30)] 数字在18与30之间,可以不填写,但填写就进入验证 jQuery.validator.addMethod... GetClientValidationRules  封装的错误信息    : base("{0}必须填写")  0代的是displayName 其他方法都是类似的做法,大家可以根据自己的需要扩展验证

    4.1K50

    bootstrapValidator 中文API

    如果false,禁用字段验证validator验证器名称。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法将返回所有字段的所有错误消息 validator验证器的名称如果未定义验证器,则该方法返回所有验证器的错误消息...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素如果未定义字段,则该方法返回表单选项。 validator验证器的名称如果未定义验证器,则该方法返回所有字段选项。...参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素 validator验证器名称 option 串 选项名称 value 串 选项值 更新状态 updateStatus...(field*, status*, validator): BootstrapValidator - 更新给定字段的验证器结果 参数 类型 描述 field 字符串| jQuery的 字段名称或字段元素

    13.2K50

    jQuery Validate(上)

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。...该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。...只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。...to {0}." ),     min: $.validator.format( "Please enter a value greater than or equal to {0}." ) } jQuery...required: "#aa:checked" 表达式的值为真,则需要验证。 required: function(){} 返回为真,表示需要验证。 后边两种常用于,表单中需要同时填或不填的元素。

    1.5K20

    Element Plus 表单验证详解

    本文将详细介绍如何在 Element Plus 中进行表单验证,并通过具体示例解释每个部分的用法。 安装 Element Plus 在使用 Element Plus 之前,需要先安装它。...ref 用于在方法中引用表单,rules 用于设置验证规则,label-width 设置表单标签的宽度。 :表单项容器。...validator: 自定义验证函数。 自定义验证器 有时内置的验证规则可能无法满足需求,这时可以使用自定义验证器。自定义验证器是一个函数,接受三个参数:rule,value,和 callback。...下面是一个示例,演示如何添加一个自定义验证器来验证用户名是否已被占用: const checkUsername = (rule, value, callback) => { if (!...通过使用内置的验证规则和自定义验证器,可以实现对表单项的精确控制。希望本文能够帮助你更好地理解和使用 Element Plus 的表单验证功能。

    35210

    Element Plus 表单验证详解

    本文将详细介绍如何在 Element Plus 中进行表单验证,并通过具体示例解释每个部分的用法。安装 Element Plus在使用 Element Plus 之前,需要先安装它。...ref 用于在方法中引用表单,rules 用于设置验证规则,label-width 设置表单标签的宽度。:表单项容器。...validator: 自定义验证函数。自定义验证器有时内置的验证规则可能无法满足需求,这时可以使用自定义验证器。自定义验证器是一个函数,接受三个参数:rule,value,和 callback。...下面是一个示例,演示如何添加一个自定义验证器来验证用户名是否已被占用:const checkUsername = (rule, value, callback) => { if (!...通过使用内置的验证规则和自定义验证器,可以实现对表单项的精确控制。希望本文能够帮助你更好地理解和使用 Element Plus 的表单验证功能。

    1K10
    领券