版本：5.1

客户端验证

客户端验证由在用户浏览器中运行的 JavaScript 执行。但是，重要的是要注意，这不足以使您的网站安全，因为黑客可以使用 curl 等工具直接将表单数据发送到您的服务器，绕过您的验证。因此，您始终需要强大的服务器端验证。

您可以通过以下 3 个步骤将客户端验证构建到您的表单中

通过 Web 资源管理器包含 Joomla 验证 JavaScript 库

Factory::getApplication()->getDocument()->getWebAssetManager()->useScript('form.validate');

如果您在 tmpl 文件中编写此行，那么通常会有 Document 可用

$this->document->getWebAssetManager()->useScript('form.validate');

此行将导致文件 media/system/js/fields/validate.js 被发送到客户端浏览器。

指定您希望通过添加 form-validate 类来对您的表单执行验证

<form class="form-validate"> ... </form>

指定您希望应用于表单字段的验证。您可以在表单定义 XML 文件中执行此操作，方法是在字段中添加一个类 validate-...。例如，指定电话号码字段应为数字

<field 
    name="telephone"
    type="telephone"
    class="inputbox validate-numeric"
    …
/>

您可以使用 4 种类型的验证

validate-username
validate-password
validate-numeric
validate-email

这些都使用 JavaScript 正则表达式来检查用户输入的值。（如果您需要检查使用的正则表达式的详细信息，那么您可以在 media/system/js/fields/validate.js 中的类 JFormValidator 构造函数中查看）。

请注意，如果您使用 type="email" 的表单字段，则会自动添加 validate-email 类。（尽管如此，您仍然需要添加上面的步骤 1 和 2 才能使其工作）。

同样，如果您指定字段是必需的，例如

<field 
    name="telephone"
    type="telephone"
    required="true"
    …
/>

那么 JavaScript 也将验证是否已在该字段中输入了值。

验证将在您单击与保存数据相关的表单上的按钮时执行，例如

<button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('myform.submit')">Submit</button>

并且验证是在 JavaScript Joomla.submitbutton 函数中触发的。

您也可能有一个取消按钮，它不会触发验证

<button type="button" class="btn btn-primary" onclick="Joomla.submitbutton('myform.cancel')">Cancel</button>

当工具栏按钮被创建时，只有那些涉及保存数据的按钮会在按钮的 HTML 元素中添加 class="form-validation" 属性。当按下按钮时，会检查其 class 属性。如果存在 form-validation 类，则会使用 validate 参数设置为 true 调用 JavaScript Joomla.submitbutton 函数。否则，它将使用 validate 设置为 false 来调用。

使用 pattern 进行自定义验证

对于 type="text" 和 type="telephone" 等字段（与 html <input> 元素相关），您可以指定用户输入的数据必须匹配的 JavaScript 正则表达式。例如

<field 
    name="message"
    type="text"
    pattern="[^x]+"
    ... />

如果字段中存在字母“x”，则会拒绝数据。

这仅适用于客户端验证！它对服务器端验证没有影响！

自定义验证例程

您可以编写自己的 JavaScript 验证函数，如下所述。 com_exampleform 示例组件（可以从这里下载）提供了客户端验证的工作示例。

步骤 1 编写 js 函数。（虽然下面使用了正则表达式，但您显然不限于此）。字段的值在 value 参数中传递，如果值有效，您应该返回 true，否则返回 false。

no-uppercase.js
window.onload = (event) => {
    document.formvalidator.setHandler('noUppercase',
        function (value) {
            // look for any uppercase characters 
            regex=/[A-Z]/g;
            // we should return false if any uppercase characters are found
            // ie, it has failed validation
            return !regex.test(value);
        });
};

您应该将所有 js 文件存储在 media 文件夹中，例如在您的组件开发目录结构中以 media/js/no-uppercase.js 的形式存储。

假设您正在为组件 com_example 编写此代码，请在您的 media/joomla.asset.json 中的资产列表中包含 js 文件。代码依赖于 form.validate 条目

{
      "name": "com_example.validate-no-uppercase",
      "type": "script",
      "uri": "com_example/no-uppercase.js",
      "dependencies": [
        "form.validate"
      ],
      "attributes": {
        "defer": true
      },
      "version": "1.0.0"
    } 

在您的代码中包含您的资产，例如在您的 tmpl 文件中

$this->document()->getWebAssetManager()->useScript('com_example.validate-no-uppercase');

在您的表单定义 XML 文件中，指定应应用此验证的字段。类属性“validate-noUppercase”应与步骤 1 中 setHandler 的参数匹配，在删除前缀“validate-”之后。

<field 
    name="message"
    type="text"
    class="inputbox validate-noUppercase"
    ... />

这仅适用于客户端验证！它对服务器端验证没有影响！

使用 pattern 进行自定义验证​

自定义验证例程​

使用 pattern 进行自定义验证

自定义验证例程