文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

介绍

HTML5提供了一个很好的功能来验证表单,但是在JavaScript中处理时,它没有多大帮助,每次为每个表单写独立的代码十分恼人。可以使用 javascript插件jrValidator解决这个问题。jrValidator中的javascript函数集是轻量级的,简单,易于使用和修改。 它已经满足基本表单验证要求。

实例

如何将jrValidator源文件加入到项目中?

  • github下载jrValidator的源文件
  • 将源文件中的jrValidator.min.css 和jrValidator.min.js 加入到你需要验证的表单的脚本中
第 1 段(可获 1.53 积分)
  1. <!--将jrValidator.min.css添加到你的脚本的顶部-->
    <link href="src/jrValidator.min.css" rel="stylesheet">
  2. <!--将jrValidator.min.js添加到你的脚本的底部-->
    <script href="src/jrValidator.min.js"></script>
  • 现在使用下面给出的指南来验证你的表单

  注意:不要忘记添加jQuery库

使用jrValidator验证表单

需要在表单标签中添加一组HTML属性来验证它。我们将在本文的后面讨论这些属性。

使用jrValidateForm()函数:

这个函数验证表单并返回真或假

/*'form_id'是被验证表单的id,变量formValidated将存储表单是否被验证的信息*/

var formValidated = jrValidateForm('form_id');

例如:

HTML:

<form id="form_id">
  <!--inputs-->
  <input type="button" onclick="submitForm('form_id');">
</form>

JS:

function submitForm(form_id){
  if(jrValidateForm(form_id)){
    //处理通过表单验证的代码
  }else{
    //处理未通过表单验证的代码
  }
}

 

将输入设置为必填字段

在必填的input的标签中使用required属性

例如:

<input type="email" required>

 

为每一个无效的输入使用自定义错误消息

在你想自定义错误消息的input标签中使用data-validation-message属性

例如:

<input type="email" data-validation-message="This is my custom error message">

如果你对默认的错误消息感到满意,那么就不要将此属性添加到input标签上

 

为文件类型的input标签设置文件输入类型

在属性值type="file"的input标签上使用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属性定义 the custom format for inputs

你可以简单的在Input标签中添加 data-custom-regex 属性,这样就可以根据你的需要设置输入值的格式。

例如:

举个例子,你想从用户那里得到10个数字,你可以简单的编写这个代码

<input type="text" data-custom-regex="^[0-9]{10}$">

注意:这里"^[0-9]{10}$"是10位数的正则表达式

使用data-password-pattern 属性验证密码

有5种类型的jrvalidator密码模式,这些将在下面讨论:

类型-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个数字:
第 6 段(可获 1.01 积分)
例如: 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="1">
自定义:提供你自己的正则表达式来验证密码
例如:1234587100
<input type="password" data-custom-regex="^[0-9]{10}$">
第 7 段(可获 0.76 积分)

验证再次输入密码

只需简单的为密码输入标签添加data-password-patterndata-for-password-id属性

<input type="password" name="re_password" data-password-pattern="retype" data-for-password-id="user_password">

注意:这里“user_password”是需要与再次输入密码相匹配的那个密码输入标签的id

浏览一下我们使用的属性

  • required
    • 用于指定由用户输入的必填字段
  • data-validation-message
    •  指定自定义错误消息 
  • data-accepted-file-format
    •  指定文件类型输入框的文件输入格式
  • data-message-loc
    •  指定错误信息显示的位置
  • data-custom-regex
    •  指定自定义格式的输入(只接受正则表达式)
  • data-password-pattern
    • 指定输入自定义格式(接受指定的正则表达式)
  • data-for-password-id
    • 指定与再次输入密码匹配的密码输入框的id
第 8 段(可获 1.49 积分)

文章评论