简介
在前端开发中，表单是一个非常重要的组件，需要我们加以重视。其中表单的校验就是一个非常重要的环节，可以有效避免用户输入不合法的信息。本文将介绍一个利用 gulp 和 htmlhint 进行表单校验的 npm 包: gulp-htmlformhint。
gulp-htmlformhint 的安装
使用 gulp-htmlformhint，需要安装 gulp 和 htmlhint 两个工具。如果已安装，则可以跳过此步骤。
$ npm install gulp htmlhint --save-dev
接下来安装 gulp-htmlformhint。
$ npm install gulp-htmlformhint --save-dev
gulp-htmlformhint 的使用
gulp-htmlformhint 的主要作用是对 html 表单进行校验，使其符合 HTML5 标准。使用 gulp-htmlformhint 的方法如下：
var gulp = require('gulp');
var htmlformhint = require('gulp-htmlformhint');
gulp.task('default', function () {
return gulp.src('./app/**/*.html')
.pipe(htmlformhint())
.pipe(htmlformhint.reporter());
});以上代码中，我们首先引入 gulp 和 htmlformhint。然后，使用 gulp.src 获取需要进行校验的 html 文件，再利用 .pipe 将 htmlformhint() 转化为 gulp 可以使用的流处理。最后，我们使用 htmlformhint.reporter() 生成校验结果的报告。
gulp-htmlformhint 配置
gulp-htmlformhint 提供了一些配置项来满足个性化需求。以下是一些常用配置项的解释：
- rulesDir: 该参数指定 htmlhint 规则文件所在的目录。默认值为 './node_modules/htmlhint/lib/rules'。
- formRules: 指定特定的表单校验规则，可以是一个对象，也可以是一个字符串。通常情况下，我们并不需要修改这个参数。
- useFormRules: 这个参数用于对 formRules 进行有效性验证，如果设置为 true，则 htmlfilehint 将验证 formRules 是否存在正确的方法名和参数。默认值为 true。
示例代码
以下是一个示例代码，我们将对一个表单进行校验，并输出校验结果报告。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ----------
-------
------
----- ---------- ------------- ----------- -------------
-------- -------
---
------ -------------------------
------ ----------- ------------ ---------- -------- ------------------------------------------------------
----- -------------------- ----- - ----- -------------
----
---
------ -------------------------------
------ --------------- --------------- ------------- -------- --------------
----- -------------------- ----- - ----- ----------------
----
---
------ ------------- ----------- ----
----
-------
-------
-------var gulp = require('gulp');
var htmlformhint = require('gulp-htmlformhint');
gulp.task('default', function () {
return gulp.src('./index.html')
.pipe(htmlformhint())
.pipe(htmlformhint.reporter());
});运行以上代码之后，我们将得到以下的校验结果报告：
index.html 1:1 warning DOCTYPE must be uppercase doctype-uppercase 6:9 error Attribute "novalidation" not allowed on element "form" no-validation-attr
我们可以看到，校验结果报告包括了每一个错误的行数和列数，以及校验结果(警告或错误)的类型和内容。
结论
通过本文的学习，我们了解了 npm 包 gulp-htmlformhint 的基本使用方法，以及一些常用的配置项。通过对表单进行校验，可以避免用户输入不合理的数据，提高前端代码的健壮性和鲁棒性。欢迎读者尝试使用本文中所介绍的方法，提高自己的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005539981e8991b448d0d29