简介
validate-js
是一个用于在前端验证表单数据的 JavaScript 库。它可以帮助开发者轻松地实现表单验证,并提供了丰富的验证规则。
安装
你可以通过npm安装 validate-js
:
--- ------- -----------
或者,你也可以将以下代码添加到html中引用:
------- -------------------------------------------------------------------------
注意:这里引入的是版本号为
0.13.1
的validate.min.js
。如果你需要其他版本,你可以到 GitHub Release 页面查看并下载。
基本使用
HTML
开始之前,我们需要定义一个HTML表单,如下所示:
----- ---------- ------------- ------------ ------ -------------------------- ------ ----------- ------------ ----------- ------ -------------------------------- ------ --------------- --------------- -------------- ------- ----------------------------- -------
JavaScript
接下来,我们需要在JavaScript中引用 validate-js
并创建验证规则。例如,定义一个简单的规则来验证邮箱和密码是否为空:
----- ----------- - - ------ - --------- ----- ------ ---- -- --------- - --------- ----- ------- - -------- -- -------- ----- -- -- ----- - ----------- - - --
然后,我们可以使用 validate
函数来验证表单数据:
----- ---- - ---------------------------------- ------------------------------- ------- -- - ----------------------- ----- ------ - -------------- ------------- -- -------- - -- ------ - ---- - -- --------- -------------- - ---
当用户点击提交按钮时,将会验证表单数据。如果存在不符合规则的数据,它将返回一个包含错误信息的对象。否则,将会提交表单。
错误处理
如果存在错误,我们可以将其显示在页面上:
----- ---- - ---------------------------------- ----- --------------- - ---------------------------------- ------------------------------- ------- -- - ----------------------- ----- ------ - -------------- ------------- -- -------- - ------------------------- - --- --------------------------------- -- - --------------------------- -- - ----- -- - ----------------------------- -------------- - ------- ---------- -------------------------------- --- --- - ---- - -------------- - ---
高级用法
自定义规则
为了满足项目中的需要,我们可能需要自定义一些规则。例如,我们需要验证两个密码是否相同:
-------------------------------- - --------------- -------- ---- ----------- - -- ------ --- ------------------------------ - ------ --------------- -- -------- ----- -------------- - --
使用自定义规则:
----- ----------- - - --------- - --------- ----- ------- - -------- -- -------- ----- -- -- ----- - ----------- - -- ------------- - --------- ----- ------------- - ---------- ---------- - - --
异步验证
有时,我们需要异步地验证表单数据。例如,当用户输入用户名时,我们需要检查该用户名是否已经被注册。在这种情况下,validate-js
提供了一个 async
函数。
首先,我们需要定义一个异步规则来检查用户名是否可用:
------------------------------------- - ----- --------------- - ----- -------- - ----- ----------------------------------------------------------------------- -- ---------------- --- ---- - ----- --- -------------- ------- ------------------------- - ----- ---- - ----- ---------------- -- ----------------- - ----------------------------------------------------------- -------- ---------------------------------------------------------------------------------------