客户端验证
客户端验证由在用户浏览器中运行的 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
。
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"
... />
这仅适用于客户端验证!它对服务器端验证没有影响!