使用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/）了解更多关于这些产品的详细信息和使用指南。