JavaScript jrValidator 用于验证 HTML 表单
jrValidator 提供一组 JavaScript 函数来验证 HTML 表单。
引言
HTML5 提供了强大的表单验证功能，但在 JavaScript 中处理时仍然不够方便，并且每次都需要为每个表单编写单独的代码也一直很令人头疼。jrValidator JavaScript 库就是为了解决这个问题而诞生的。jrValidator 中的 JavaScript 函数集轻量级、简单且易于使用和修改。它被编写出来是为了满足基本表单验证的需求。
如何将此源代码添加到项目中？
- 从 github 下载 jrValidator 的源代码文件。
- 将 src 文件夹中的 jrValidator.min.css 和 jrValidator.min.js 添加到需要验证表单的脚本中。
-
<!--add jrValidator.min.css at the top of your script--> <link href="src/jrValidator.min.css" rel="stylesheet">
-
<!--add jrValidator.min.js at the end of your script--> <script href="src/jrValidator.min.js"></script>
- 现在，按照下面的指南验证您的表单。
注意：不要忘记添加 jQuery 库。
使用 jrValidator 验证表单
有一些 HTML 属性应该包含在 form 标签中才能进行验证。我们将在本文后面讨论这些属性。
使用 jrValidateForm() 函数
此函数验证表单并返回 true 或 false。
/*here 'form_id' is the id of form to be validated and variable formValidated will store the info
whether the form is validated or not*/
var formValidated = jrValidateForm('form_id');
示例
HTML
<form id="form_id">
<!--inputs-->
<input type="button" onclick="submitForm('form_id');">
</form>
JavaScript
function submitForm(form_id){
if(jrValidateForm(form_id)){
//code to handle if the form is validated
}else{
//code to handle if the form is not validated
}
}
将输入设置为必填字段
在必填输入项中使用 required 属性。
示例
<input type="email" required>
<!--also applicable on select-->
<select type="gender" required>
<option>Female</option>
<option>Male</option>
<option>Other</option>
</select>
为每个无效输入使用**自定义错误消息**
在您希望设置自定义错误消息的输入项中使用 data-validation-message 属性。
示例
<input type="email" data-validation-message="This is my custom error message">
如果您对默认错误消息满意，则不要将此属性添加到输入项。
为文件类型输入设置**接受的文件格式**
在文件类型输入项中使用 data-accepted-file-format 属性。
示例
<input type="file" data-accepted-file-format="jpg, gif, png"
data-validation-message="This is my custom error message">
有一个默认的消息框用于显示错误消息（如下图所示），但您也可以在首选位置获取消息。
**所有输入项的通用错误消息框**
在 form 标签中使用 data-message-loc 属性。
示例
<form type="email" data-message-loc="msg-box-id">
<!--inputs-->
</form>
注意：这里，'msg-box-id' 是通用错误消息框的 ID。
**每个输入项的专属错误消息框**
在每个 input 标签中使用 data-message-loc 属性。
示例
<input data-message-loc="msg-box-id1">
<input data-message-loc="msg-box-id2">
使用 data-custom-regex 属性定义输入的自定义格式
您可以直接在输入项中添加 data-custom-regex 属性，以根据您的需求设置输入项的格式。
示例
例如，如果您想从用户那里获取一个 10 位数字，您可以简单地编写此代码。
<input type="text" data-custom-regex="^[0-9]{10}$">
注意：这里，"^[0-9]{10}$" 是 10 位数字的正则表达式。
使用 data-password-pattern 属性验证密码
jrValidator 中有 5 种密码模式，如下所述。
模式 1：至少 8 个字符，至少包含 1 个字母和 1 个数字。
示例：valid12345
<input type="password" data-password-pattern="1">
模式 2：至少 8 个字符，至少包含 1 个字母、1 个数字和 1 个特殊字符。
示例：valid#12345
<input type="password" data-password-pattern="2">
模式 3：至少 8 个字符，至少包含 1 个大写字母、1 个小写字母和 1 个数字。
示例：Valid12345
<input type="password" data-password-pattern="3">
模式 4：至少 8 个字符，至少包含 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符。
示例：Valid@12345
<input type="password" data-password-pattern="4">
模式 5：至少 8 个字符，最多 10 个字符，至少包含 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符。
示例：Valid@123
<input type="password" data-password-pattern="5">
自定义：提供您自己的正则表达式来验证密码。
示例：1234587100
<input type="password" data-custom-regex="^[0-9]{10}$">
验证**重复输入的密码**
可以通过在密码类型的输入项中添加 data-password-pattern 和 data-for-password-id 两个属性来实现。
<input type="password" name="re_password" data-password-pattern="retype"
data-for-password-id="user_password">
注意：这里，"user_password" 是要与 retype 密码匹配的密码类型输入项的 ID。
属性概览
required- 用于指定用户必须填写输入字段。
data-validation-message- 指定自定义错误消息。
data-accepted-file-format- 指定文件类型输入项接受的文件格式。
data-message-loc- 指定错误消息将显示的位置。
data-custom-regex- 指定输入的自定义格式（仅接受正则表达式）。
data-password-pattern- 指定输入的自定义格式（仅接受正则表达式）。
data-for-password-id- 指定要与重复密码匹配的密码的 ID。