15个最佳的 JavaScript 表单验证库

客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器。 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示。JavaScript 表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。

在本文中,您将找到最好的15个 JavaScript 表单验证库,可以帮助你让表单验证对用户更友好的和美观。

1.ApproveJS

approvejs不会自动附加到输入变化的事件或表单提交事件。它也不会通过自动显示错误来操作DOM。这允许您处理您想要的验证。approvejs暴露一个单一的方法,value()让你决定当一个值验证错误显示的方式。如果你喜欢控制或有点强迫症一样,approvejs是给你的。

在线预览

2.Validator.js

validator.js是一个字符串验证器和杀菌剂库。它可以在客户端和服务器端使用。

在线预览

3.Valid.js

Valid.js 是数据验证一个简单的JavaScript库。下面是验证函数。

• String : isString, minLength(min), maxLength(max), length(min, max), regex(reg)

• Number: isNumber, minNumber, maxNumber, between

• Date: isDate, minDate(min), maxDate(max), between(min, max)

• Bool: isTrue, isFalse

• Util: isRequired, isEmail, isCep

在线预览

4.Validate.js

Validate.js provides a declarative way of validating JavaScript objects. It is unit tested with 100% code coverage and can be considered fit for production. The goal of validate.js is to provide a cross framework and cross language way of validating data. The validation constraints can be declared in JSON and shared between clients and the server. 提供验证JavaScript对象的声明方式。它是单元测试,有100%的代码覆盖率,可以被认为适合于生产。validate.js的目标是提供一个跨框架和验证数据的跨语言的方式。验证约束可以在JSON中声明,并在客户端和服务器之间共享。

在线预览

5.jQuery.mobilePhoneNumber

jQuery.mobilePhoneNumber是用于验证和格式化移动电话号码的通用库。

在线预览

6.xTypejs

xtype.js是一种优雅、高效的JavaScript数据验证。它提供了简洁、高效的,可读性强,数据和JavaScript类型验证,使用接近40的高效数据验证伪类型。

它可以提高应用程序的效率和可读性的统一的最基本而共同的数据和JavaScript应用程序,类型验证单,简洁,高度优化的操作。

采用按位运算、数据预处理、高效存储记忆的快速,在小型和大型的应用程序和库的鲁棒性能。

在线预览

7.Payform

Payform是用于构建信用卡表单、验证输入和格式化数字的JavaScript库。这个库还包括一个 jQuery插件。

在线预览

8.Mailcheck

mailcheck是一个JavaScript库jQuery插件,提示右域,当你的用户将在一个电子邮件地址。当你的用户类型在"user@hotnail.con", Mailcheck认为 "user@hotmail.com"。

在线预览

9.Formance.js

用于格式化和验证表单字段的jQuery库,基于条纹的 jquery.payment图书馆。它支持各种领域,如信用卡CVC,信用卡到期,信用卡号码,电子邮件地址,日期,号码,安大略的驾驶执照号码和更多。

在线预览

10.Verify.js

Verify.js是一个强大的、可定制的异步表单验证库。它是完全可定制的,易于扩展,不引人注目,包括分组验证以及异步验证。

在线预览

11.Seahorse

Seahorse是一个JavaScript库,被授权为自由软件,它是为了简化表单的使用而创建的,特别是简化表单验证。它提供的功能来验证转换和序列化的信息和功能将实时验证行为形成的领域。它可以被用于任何 的JavaScript框架,然而,有一个插件一起使用jQuery。

在线预览

12.>Parsleyjs

Parsley是一个JavaScript表单验证库。它可以帮助您在发送表单到服务器之前向用户提供表单提交的反馈。它节省了带宽,服务器负载,节省了用户的时间。

JavaScript表单验证不是必需的,如果使用,它不会取代强大的后端服务器验证。

这就是为什么Parsley在这里:让你定义你的一般形式的验证,执行它的后端侧,和简单的端口前端侧,以最大的尊重用户体验的最佳实践。

在线预览

13.Form Validation Made Easy

表单验证–简单脚本允许你很容易设置验证规则和验证这些规则对任何输入来自任何类型的数组数据源如_post美元,美元_get或键/值填充数组。

该脚本可以轻松地插入现有的HTML表单代码,而无需大幅度更改HTML代码。或从头开始实施。剧本也处理的输入值的人口输入框、文本区域、复选框、单选按钮和选择列表,如果默认值被指定当窗体发送和返回给用户。这意味着用户在表单无效时,不必输入两次相同的信息!

该脚本附带了一系列预定义规则,但您希望如何验证表单中的每个输入都取决于您自己。使用自定义函数,您可以连接脚本并提供自己的验证规则和错误消息。

在线预览

14.JavaScript Form Validation Library

这是一个完整的库,用于验证客户端输入并相应地提供反馈。JavaScript库包含12个基本验证函数,它们可以验证所有类型的表单字段。此库包括简单的集成、可视化反馈、范围检查、文本反馈、检查最小长度、值检索、检查日期格式、验证电子邮件、验证URL等。

在线预览

15.Easy to Setup Form Validator JavaScript

JS自动生成验证器是一个易于安装的表单验证脚本,可以使用现成的JavaScript类处理整个表单验证过程。该脚本允许您指定某些表单元素为“必需的”或“非必需的”,也可以指定它们的特定类型:文本、密码、数字、邮政编码等。它适用于本机JavaScript,意味着页面加载速度要快得多,尤其是在移动设备上,因为不需要jQuery!

在线预览

转载于:https://www.cnblogs.com/i7758/p/7872228.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-validator 是 Laravel 风格的 JavaScript 对象验证。使用 js-validator 来验证对象或者 JSON 是否符合规则非常方便,而且具有很好的可扩展性。举个例子var example = {       text: 'Hello world!',       date: '2015-07-07',       comments: null,     },     rules = {       text: 'required|string',       date: 'date|date_format:yyyy-MM-dd',       comments: 'integer',     }; console.log(Validator.validate(example, rules)); // => Object {status: "failed", field: "comments", rule: "integer"}基本用法引入validator.js(原生JavaScript)[removed] [removed]或[removed] [removed]初始化(非原生JavaScript)Node.jsnpm install ppoffice/js-validator --savevar validator = require('js-validator');RequireJSrequirejs(["../src/validator"], function(validator) {   ... });Sea.jsdefine(function (require, exports, module) {   var validator = require('./validator');   ... });制定验证规则对于同一个对象属性,你可以并列制定几个不同的规则进行限定,使用|作为不同规则间的分割符。var rules = {   text: 'required|string',   date: 'date|date_format:yyyy-MM-dd',   comments: 'integer', };验证validator.validate(object_to_be_tested, rules);如果待验证对象符合规则,validate函数返回true;否则返回带有验证状态、失败的属性和对应失败的规则信息的对象。添加验证器使用add方法为Validator添加验证器,第一个参数为验证器名称,第二个参数为验证方法,可以为正则表达式对象或者函数。当验证方法为函数时,其第一个参数必须为当前验证域的值,后面的参数根据需求而定,验证成功时结果返回true。validator.add('older_than', function (value, age) {   return value > age; });var rules = {   age: 'integer|older_than:17', };可用的验证规则验证规则规则含义accepted验证域必须为yes、on、1、或者true。 这个规则常用语验证“同意使用条款”表单。after:date验证的日期域的日期必须在指定日期之后。alpha验证域必须由纯英文字符组成。alpha_dash验证域必须由英文字符、数字、中划线或者下划线组成。alpha_num验证域必须由英文字符或者数字组成。array验证域必须为数组对象。before:date验证的日期域的日期必须在给定日期之前。between:min,max验证域的值必须在min和max之间,验证域可以是数字或者字符串。boolean验证域的值可以看作是布尔值,可以是true,false,1,0,"1","0",'1' and '0'。date验证域必须为日期字符串形式,可以被Date.parse方法解析。date_format:format验证域必须符合制定的日期格式,允许的日期格式参照源代码中的dateFormat方法。different:field验证域的值必须域指定域的值不同。digits:value验证域必须为数字,且其位数为给定的位数。digits_between:min,max验证域必须为数字,且其位数在min和max之间。email验证域必须为电子邮件地址格式。in:foo,bar,...验证域的值必须在给定的允许值列表中。integer验证值必须为整数。ip验证值必须为IP地址形式(支持IPv4与IPv6)。max:value验证域的值必须小于等于max,验证域可以是数字或者字符串。mimes:foo,bar,...验证值的扩展名必须在给定的扩展名列表中。min:value验证域的值必须大于等于min,验证域可以是数字或者字符串。not_in:foo,bar,...验证域的值必须不在给定的值列表中。numeric验证域必须为数字。regex验证域必须符合指定的正则表达式(JavaScript风格)。required验证域必须存在。required_if:field,value,...如果给定的域的值等于给定的值,验证域必须存在。这里的条件可以是多个域和值,它们之间的关系为“与”。required_with:foo,bar,...如果给定的域之中任何一个存在的话,验证域必须存在。required_with_all:foo,bar,...仅当所有给定的域存在时,验证域必须存在。required_without:foo,bar,...如果给定的域之中任何一个不存在的话,验证域必须存在。required_without_all:foo,bar,...仅当所有给定的所有域都不存在时,验证域必须存在。same验证域的值必须域指定域的值相同。size:value验证域的大小必须等于指定大小。对于字符串来说,验证域的字符串长度必须等于给定长度。对于数字来说,验证域的值必须等于给定值。string验证域必须为字符串。url验证域必须为URL地址。当前不支持含有非英文(中文等)字符的地址。测试文件入口./test/index.html     原生JavaScript支持测试./test/node.js        Node.js支持测试./test/requirejs.html RequireJS支持测试./test/seajs.html Sea.js支持测试 标签:jsvalidator
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值