跳至主要内容
版本:5.1

客户端验证

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

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

  1. 通过 Web 资源管理器 包含 Joomla 验证 JavaScript 库
Factory::getApplication()->getDocument()->getWebAssetManager()->useScript('form.validate');

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

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

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

  1. 指定您希望通过添加 form-validate 类来对您的表单执行验证
<form class="form-validate"> ... </form>
  1. 指定您希望应用于表单字段的验证。您可以在表单定义 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. 步骤 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 的形式存储。

  1. 假设您正在为组件 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"
}
  1. 在您的代码中包含您的资产,例如在您的 tmpl 文件中
$this->document()->getWebAssetManager()->useScript('com_example.validate-no-uppercase');
  1. 在您的表单定义 XML 文件中,指定应应用此验证的字段。类属性“validate-noUppercase”应与步骤 1 中 setHandler 的参数匹配,在删除前缀“validate-”之后。
<field 
name="message"
type="text"
class="inputbox validate-noUppercase"
... />

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