在前端开发中，表单验证是必不可少的一环，一个合格的表单验证可以避免很多不必要的错误和用户提交不规范数据。js-form-validate 是一个用于表单验证的 npm 包，它可以很方便快捷地完成前端表单验证的工作。
安装
安装 js-form-validate 只需要使用 npm 命令即可：
npm install js-form-validate
使用方法
使用 js-form-validate 可以非常简单地实现表单验证。首先，在 HTML 中引入 js-form-validate：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ ------------ -------- -------------------------------------------------- ------- ------ ------- -------- -------------------------------- -------- ----------- ------------- --------------- --------- ------ -------- -------------------------------- -------- --------------- ------------- --------------- --------- ------ -------- ------------- --------------- -------- --------- ----------------------------- ---------- ------- -------
在上述代码中，输入框都使用了 required 属性，这个属性在 js-form-validate 中是必须的。然后，在 JS 中调用 jsFormValidate 方法即可完成验证：
jsFormValidate('#my-form');这个方法接受一个参数，就是要验证的表单的选择器。当表单提交时，js-form-validate 会自动判断并阻止不符合要求的数据提交。
验证规则
js-form-validate 内置了一些常用的验证规则，可以直接在 HTML 中作为标签属性使用。下面是一些常用的验证规则：
required：必填项maxlength：最大长度minlength：最小长度email：电子邮件url：网址number：数字integer：整数float：浮点数pattern：正则表达式
使用这些验证规则非常简单，只需要在 HTML 标签的属性中设置即可：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ ------------ -------- -------------------------------------------------- ------- ------ ------- -------- -------------------------- -------- ----------- ---------- ------------ -------- ---------------------- ------ -------- ---------------------- -------- ------------- -------- ---------- -------- -------- --------- ------ -------- ------------- --------------- -------- --------- ----------------------------- ---------- ------- -------
上面的代码中，第一个输入框设置了 pattern 属性，用于验证手机号码；第二个输入框设置了 min 和 max 属性，用于验证输入的年龄必须在 18 到 60 之间。
自定义规则
当内置的验证规则不满足需求时，我们可以自定义规则。举个例子，我们需要验证用户输入的密码必须同时包含字母和数字，长度在 6 到 16 之间。我们可以定义一个新的验证规则：
jsFormValidate.addRule('password', function(value) {
var regex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
return regex.test(value);
}, '密码必须包含字母和数字，长度在 6 到 16 之间');上面的代码中，我们定义了一个名为 password 的规则，这个规则的判断条件是密码必须包含字母和数字，长度在 6 到 16 之间，同时定义了一个错误提示信息。在 HTML 中使用这个规则非常简单：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ ------------ -------- -------------------------------------------------- ------- ------ ------- -------- -------------------------------- -------- ----------- ------------- --------------- --------- ------ -------- -------------------------------- -------- --------------- ------------- --------------- -------- --------------------- ------ -------- ------------- --------------- -------- --------- ----------------------------- ------------------------------------ --------------- - -- --- ----- - ----------------------------------------------- -- ------ ------------------ ---- ---------------- - - -- ----- ---------- ------- -------
上面的代码中，我们在第二个输入框中加入了 data-rule="password" 属性，这样 js-form-validate 就会自动使用我们定义的规则进行验证。
总结
js-form-validate 是一个非常实用的 npm 包，可以方便地实现前端表单验证的工作。它内置的验证规则非常丰富，而且还可以自定义规则，非常适合各种不同的需求。使用 js-form-validate，我们可以避免很多不必要的错误和用户提交不规范数据，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d0927023822962