使用parsley.js提交表单外部标签验证表单
是指利用parsley.js这个前端表单验证插件来验证表单的输入数据，并且将验证结果显示在表单外部的标签中。
Parsley.js是一个轻量级的前端表单验证库，它可以通过简单的HTML标签属性来定义表单字段的验证规则，并提供了丰富的验证选项和自定义错误消息的功能。使用parsley.js可以方便地实现表单的实时验证和错误提示。
在使用parsley.js提交表单外部标签验证表单时，可以按照以下步骤进行操作：
- 引入parsley.js库文件：在HTML页面中引入parsley.js的库文件，可以通过CDN方式引入，也可以下载到本地并引入。
- 设置表单字段的验证规则：在表单的各个字段上添加相应的HTML属性来定义验证规则，例如使用
data-parsley-required属性来表示字段必填，使用data-parsley-type属性来指定字段的数据类型等。 - 创建表单外部标签：在表单外部创建一个用于显示验证结果的标签，例如一个
<div>元素或者一个<span>元素。 - 初始化parsley.js：在页面加载完成后，通过JavaScript代码初始化parsley.js，将表单和表单外部标签进行关联。
- 提交表单时进行验证：当用户点击提交按钮时，使用parsley.js提供的方法对表单进行验证，如果验证通过则继续提交表单，否则显示相应的错误信息。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用parsley.js提交表单外部标签验证表单</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.css">
</head>
<body>
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" data-parsley-required="true">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" data-parsley-required="true" data-parsley-type="email">
<button type="submit">提交</button>
</form>
<div id="validationResult"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/parsleyjs@2.9.2/dist/parsley.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').parsley();
$('#myForm').on('submit', function(event) {
event.preventDefault();
if ($('#myForm').parsley().isValid()) {
// 表单验证通过，可以进行提交操作
$('#validationResult').text('表单验证通过，可以提交');
// 提交表单的逻辑代码
} else {
// 表单验证不通过，显示错误信息
$('#validationResult').text('表单验证不通过，请检查输入');
}
});
});
</script>
</body>
</html>在这个示例中，我们创建了一个包含姓名和邮箱两个字段的表单，并使用parsley.js来验证这两个字段的输入。当用户点击提交按钮时，通过$('#myForm').parsley().isValid()方法来判断表单是否通过验证，如果通过验证则显示"表单验证通过，可以提交"的提示信息，否则显示"表单验证不通过，请检查输入"的错误信息。
需要注意的是，以上示例中的代码只是一个简单的演示，实际使用中可能需要根据具体的需求进行适当的修改和扩展。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库（TencentDB）等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
1回答
使用parsley.js提交表单外部标签验证表单
javascript、jquery、parsley.js、formvalidation-plugin
我有一个场景，我想用parsley.js来验证这段代码。现在，我想在一个模式中创建一个动态表单，这个模式是一个可重用的模式，在表单标签之外有button/submit。如何使用parsley.js验证此场景？我的模式如下所示：
<input type="button" class="btn btn-sm btn-success save_data" value="Save"&g
浏览 18提问于2020-05-12得票数 0
回答已采纳
2回答
成功的表单验证后，CodeIgniter不会重定向
php、forms、codeigniter、validation、redirect
>
最终发生的是用户提交表单并进行验证。它捕获错误并迫使您更正它们，但是如果所有字段签出，那么它将在后台静默提交表单并将行添加到数据库中，同时保留表单(它甚至没有重新加载任何内容；没有闪烁)。我试过注释所有的set_rules()调用，但是验证仍然在进行。我试着注释掉if/else块，只要求它提交数据和重定向，但是它仍然执行验证，并且保持在表单上，好像什么都没发生一样。
浏览 8提问于2016-09-24得票数 0
回答已采纳
1回答
如何使用欧芹js为文件字段(输入type=" file“)添加所需的验证？
jquery、html、forms、parsley.js、parsley
在对表单字段进行验证时，我可以使用所需的attibutes parsley.js验证所有字段。除了文件字段。我无法验证文件上传字段。当我使用Firefox中的developer工具(检查元素)检查代码时，没有为字段中的验证添加任何类。剩余文本字段，Select有额外的欧芹类。我的HTML代码：
<input type="file" id="uploadDox" name="filename&quo
浏览 4提问于2015-09-07得票数 0
1回答
对表单中的元素组的欧芹验证不起作用
javascript、html、validation、forms、parsley.js
我正在使用Parsley.js来验证我的一个项目的表单提交。
我有两个面板与单一提交按钮在每个面板。单击submit按钮时，我只需要验证该面板元素，而不是其他面板元素。为此，我使用了中附加的代码。
浏览 5提问于2014-10-09得票数 2
1回答
在欧芹验证中触发颜色盒的调整
javascript、jquery
好的，基本上，我使用parsley.js验证和彩色框通过ajax提交表单。这就是表单提交代码的样子。
浏览 1提问于2014-04-23得票数 0
回答已采纳
2回答
只有当表单成功提交时才发生jQuery事件
javascript、jquery、html、forms
我有一份有验证的表格。目前，表格的投递时间可达10秒。我想在表单提交上加载loading.gif。我目前遇到的问题是，即使表单尚未通过验证，也会加载gif。只有在表单有效的情况下，我才需要一种方法来加载gif，下面是我的当前脚本： $('#gif').css('visibility', 'visible');
return true;
浏览 3提问于2016-04-11得票数 1
回答已采纳
2回答
Parsley.js验证未触发
javascript、forms、validation、parsley.js
我使用Parsley.js来验证我的表单。我告诉欧芹通过添加." name="myform"> <input type="text" name="username" data-required="true"/>
如果您忽略了所需的字段并试图使用此按钮提交表单<input type="submit" valu
浏览 1提问于2013-11-06得票数 1
回答已采纳
3回答
只需要一组字段中的一个字段即可
parsley.js
我正在使用Parsley.js来验证一个项目的表单提交。我的需求之一是让Parsley要求三个字段中至少有一个字段中包含数据，并且只有在这三个字段中都没有数据时验证才会失败。我已经在表单的其余部分进行了香菜验证。
浏览 1提问于2014-09-05得票数 5
1回答
拆分为两个div的parsley.js验证表单
jquery、forms、validation、parsley.js
我有一个表单需要验证。它在响应式布局中运行在两个Div上。表单作为一个表单提交。但是我不能让parsley.js来验证这两个部分。如果我将表单放到一个div中，它可以工作，但我需要表单的两个部分相邻，而不是一个长的连续的表单。我该怎么办？
谢谢你，白吉
浏览 1提问于2014-02-25得票数 0
1回答
如何使parsley.js插件与jeditable插件协同工作
jquery、parsley.js、jeditable
我尝试在元素中插入内置验证器在尝试提交之后，它会忽略parsley.js表单验证器。这是我当前使用的的链接
我应该找另一个像欧芹菜这样的验证器插件吗？就像你在jav
浏览 22提问于2017-01-17得票数 0
2回答
检查Parsleyjs引发的所有错误
javascript、forms、validation、parsley.js
我有一个使用Parsley.js验证过的表单，但现在不允许提交表单，尽管没有解释表单提交失败的原因(尽管我已经证实是欧芹阻止了提交)。两个问题：
(1)我怀疑欧芹验证在隐藏的字段上失败，或者由于某种原因没有显示其错误消息。有没有一种方法只记录控制台中所有的欧芹验证失败？(2)是否有办法使欧芹不能阻止表单提交，同时仍然保留欧芹的功能，为按键等提供“实时”验证
浏览 0提问于2014-03-12得票数 1
回答已采纳
1回答
Angular 4表单验证
forms、angular、validation
如何通过点击外部链接(即标签外面)来验证angular 4中的表单。如果表单有效，请对表单数据执行一些操作，否则将显示验证消息。如果表单有效，我不想提交表单，只需要获取表单字段的值。
浏览 2提问于2017-09-07得票数 0
1回答
网站新表单验证
php、javascript、forms、validation
我刚开始接受验证，这些年来我一直很幸运。我想在我的网站上更新我的表单创建方法。我很想知道什么是标准，是否有一个预先存在的解决方案来满足我的需求？我这个星期的目标是学习如何验证一个电子邮件地址和检查垃圾邮件。
我可以在HTML5中无问题地创建表单，但我不知道使用PHP验证的JavaScript表单验证是否是标准的。
浏览 0提问于2013-03-13得票数 4
回答已采纳
2回答
用parsley.js异步提交表单
jquery、parsley.js
我正在尝试创建一个使用Parsley.js验证前端并异步提交的表单。表单名为#contactForm，submit按钮为#sendData，当我在空的或无效的表单上单击submit时，会出现错误。我希望从无效的表单数据中看到一个“错误”警报，但是它只会继续其他条件，数据由contactForm.php处理。
浏览 4提问于2013-04-01得票数 9
回答已采纳
2回答
Parsley.js最小长度未触发
parsley.js
我用parsley.js做了一个简单的最小长度测试，得到了以下代码。表单验证输入标记上的'required‘参数，但在输入单个字符(低于每个参数的minlength值6)并提交表单时，不会生成消息。ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javasc
浏览 1提问于2013-12-24得票数 0
1回答
如何在Meteor中隐藏/显示基于欧芹表单验证的提交按钮？
meteor、parsley.js
我对parsley.js和流星(1.0)都是新手。我试图根据表单字段是否通过了欧芹验证来隐藏/显示表单提交按钮。这似乎应该是相当简单的，但我受到了我缺乏经验的阻
浏览 2提问于2014-11-07得票数 2
回答已采纳
1回答
表单:提交无法防止默认情况下返回false
javascript、jquery、forms、parsley.js
我想用parsley.js验证一个表单，然后通过jQuery.post提交，这需要阻止默认的表单提交，但它并不像预期的那样工作。for form:submit说：
在表单验证成功之后，在表单实际提交之前触发。返回false以中断提交。但是，我不能让它起作用.以下代码更新#alert元素，然后通过默认浏览器级别请求提交表单。似乎没有执行$.post调用。反正服务器
浏览 0提问于2016-07-13得票数 2
回答已采纳
1回答
验证失败的Parsley.js提交表单
javascript、parsley.js
我在Parlsey.js中使用两个组，一个用于警告，另一个用于关键错误。如果警告失败，表单仍应提交，但如果严重错误失败，则不应提交。我试过使用$('form').off('form:validate');，这是我在另一篇文章中看到的，但它似乎什么也没做。理想情况下，我只希望在关键组失败时阻止表单提交，但我怀疑Parsley.js是否支持这一点。然而，似乎应该有一种方法告诉Parsley.js始终
浏览 4提问于2017-05-12得票数 1
回答已采纳
1回答
在ASP.net页面上使用Parsley.js只验证一种表单
jquery、asp.net、forms、parsley.js、multiple-forms
我目前正在使用一个ASP.net页面，该页面需要对整个页面进行一个表单标记包装。在该表单中有两个单独的表单及其各自的提交按钮。我正在试图找到一种方法来验证(使用parsley.js) --当它各自提交但被单击时，它只验证一种表单，但目前它正在验证这两种形式。
有人知道我该怎么做吗？
浏览 2提问于2015-06-30得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
