jaywcjlove / Validator.js
⁉️轻量级的 JavaScript 表单验证,字符串验证。没有依赖,支持 UMD ,~3kb。
Stars: ✭ 486
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Validator.js
Validate
A simple jQuery plugin to validate forms.
Stars: ✭ 298 (-38.68%)
Mutual labels: validation, validator, validate, form
Ngx Dynamic Form Builder
FormBuilder + class-transformer + class-validator = dynamic form group builder for Angular10+
Stars: ✭ 93 (-80.86%)
Mutual labels: validation, validator, form
checker
Golang parameter validation, which can replace go-playground/validator, includes ncluding Cross Field, Map, Slice and Array diving, provides readable,flexible, configurable validation.
Stars: ✭ 62 (-87.24%)
Mutual labels: validation, validator, validate
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (-73.87%)
Mutual labels: validation, validate, form
Nice Validator
Simple, smart and pleasant validation solution.
Stars: ✭ 587 (+20.78%)
Mutual labels: validation, validator, validate
Validate
⚔ Go package for data validation and filtering. support Map, Struct, Form data. Go通用的数据验证与过滤库,使用简单,内置大部分常用验证、过滤器,支持自定义验证器、自定义消息、字段翻译。
Stars: ✭ 378 (-22.22%)
Mutual labels: validation, validator, validate
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (-76.95%)
Mutual labels: validation, validate, form
Vee Validate
✅ Form Validation for Vue.js
Stars: ✭ 8,820 (+1714.81%)
Mutual labels: validation, validator, validate
Approvejs
A simple JavaScript validation library that doesn't interfere
Stars: ✭ 336 (-30.86%)
Mutual labels: validation, validator, form
node-input-validator
Validation library for node.js
Stars: ✭ 74 (-84.77%)
Mutual labels: validation, validator, form
Formhelper
ASP.NET Core - Transform server-side validations to client-side without writing any javascript code. (Compatible with Fluent Validation)
Stars: ✭ 155 (-68.11%)
Mutual labels: validation, validator, form
python-valid8
Yet another validation lib ;). Provides tools for general-purpose variable validation, function inputs/outputs validation as well as class fields validation. All entry points raise consistent ValidationError including all contextual details, with dynamic inheritance of ValueError/TypeError as appropriate.
Stars: ✭ 24 (-95.06%)
Mutual labels: validation, validator, validate
datalize
Parameter, query, form data validation and filtering for NodeJS.
Stars: ✭ 55 (-88.68%)
Mutual labels: validation, validator, form
Validator.js
String validation
Stars: ✭ 18,842 (+3776.95%)
Mutual labels: validation, validator, validate
thai-citizen-id-validator
🦉 Validate Thai Citizen ID with 0 dependencies 🇹🇭
Stars: ✭ 35 (-92.8%)
Mutual labels: validation, validator
Graphql Constraint Directive
Validate GraphQL fields
Stars: ✭ 401 (-17.49%)
Mutual labels: validation, validator
validation
Validation on Laravel 5.X|6.X|7.X|8.X
Stars: ✭ 26 (-94.65%)
Mutual labels: validation, validator
excel validator
Python script to validate data in Excel files
Stars: ✭ 14 (-97.12%)
Mutual labels: validation, validator
validator
轻量级的JavaScript表单验证,字符串验证。没有依赖,支持UMD,~3kb
。
安装使用
模块
在应用中引用 validator.min.js
文件
# npm 安装
$ npm install validator.tool --save
# bower 安装
$ bower info validator.tool
在 .js
文件中调用
// 字符串验证
var validator = require('validator.tool');
var v = new validator();
v.isEmail('[email protected]');
v.isIp('192.168.23.3');
v.isFax('');
// 表单验证
var a = new validator('example_form',[
{...}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
客户端使用
在应用中引用 validator.min.js
文件, 手动下载并链接HTML中的 validator.min.js
<script type="text/javascript" src="dist/validator.min.js"></script>
也可以通过 UNPKG 下载:
<script type="text/javascript" src="https://unpkg.com/validator.tool/dist/validator.min.js"></script>
在JS中使用方法。
<script type="text/javascript">
var v = new Validator();
v.isEmail('[email protected]');
v.isIp('192.168.23.3');
</script>
应用在表单中的方法。
<form id="example_form">
<div>
<label for="email">邮箱验证</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="输入密码">
</div>
<div class="form-group">
<label for="repassword">确认密码:</label>
<input type="repassword" name="repassword" id="repassword" class="form-control" placeholder="输入密码">
</div>
</form>
<script type="text/javascript">
var validator = new Validator('example_form',[
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_emil|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
},{
name:"password",
display:"必填",
rules: 'required'
},{
name:"repassword",
display:"密码不一致",
rules: 'same(password)'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
</script>
说明文档
new Validator(formName, option, callback)
formName
formName
是标签中<form>
中的 id
或者 name
的值,如上面的example_form
option
-
name
-> input 中name
对应的值 -
display
-> 验证错误要提示的文字{{这个中间是name对应的值}}
-
rules
-> 一个或多个规则(中间用|
间隔)-
is_email
-> 验证合法邮箱 -
is_ip
-> 验证合法 ip 地址 -
is_fax
-> 验证传真 -
is_tel
-> 验证座机 -
is_phone
-> 验证手机 -
is_url
-> 验证URL -
is_money
-> 金额格式验证 -
is_english
-> 字母验证⚠️ -
is_chinese
-> 中文验证 -
is_percent
-> 验证百分比⚠️ -
required
-> 是否为必填 -
max_length
-> 最大字符长度 -
min_length
-> 最小字符长度 -
same(field)
-> 指定字段内容是否相同 -
different(field)
-> 拒绝与某个字段相等,比如登录密码与交易密码情况 -
contains(field)
-> 直接判断字符串是否相等 -
accepted(field)
-> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
-
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_email|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
}
自定义正则
自定义正则,以regexp_
开始
{
//name 字段
name: 'sex',
// 对应下面验证提示信息
display:"请你选择性别{{sex}}|请输入数字",
//自定义正则`regexp_num`
regexp_num:/^[0-9]+$/,
// 验证条件,包括应用自定义正则`regexp_num`
rules: 'required|regexp_num'
}
callback
var validator = new Validator('example_form',[
{...},{...}
],function(obj,evt){
//obj = {
// callback:(error, evt, handles)
// errors:Array[2]
// fields:Object
// form:form#example_form
// handles:Object
// isCallback:true
// isEmail:(field)
// isFax:(field)
// isIp:(field)
// isPhone:(field)
// isTel:(field)
// isUrl:(field)
// maxLength:(field, length)
// minLength:(field, length)
// required:(field)
//}
if(obj.errors.length>0){
// 判断是否错误
}
})
特殊情况直接提交
var validator = new Validator('example_form',[
{...},{...}
],function(obj,evt){
//obj = {
//}
if(obj.errors.length>0){
// 判断是否错误
}
})
validator.passes().form.submit();
例子
字符串验证
var v = new Validator();
v.isEmail('[email protected]'); // -> 验证合法邮箱 |=> 返回布尔值
v.isIp('192.168.23.3'); // -> 验证合法 ip 地址 |=> 返回布尔值
v.isFax(''); // -> 验证传真 |=> 返回布尔值
v.isPhone('13622667263'); // -> 验证手机 |=> 返回布尔值
v.isTel('021-324234-234'); // -> 验证座机 |=> 返回布尔值
v.isUrl('http://JSLite.io'); // -> 验证URL |=> 返回布尔值
v.maxLength('JSLite',12); // -> 最大长度 |=> 返回布尔值
v.minLength('JSLite',3); // -> 最小长度 |=> 返回布尔值
v.required('23'); // -> 是否为必填(是否为空) |=> 返回布尔值
表单中验证
点击按submit按钮验证
var validator = new Validator('example_form',[
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_email|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
},{
//name 字段
name: 'sex',
display:"请你选择性别{{sex}}",
// 验证条件
rules: 'required'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
没有submit验证
var validator = new Validator('example_form',[
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_email|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
},{
//name 字段
name: 'sex',
display:"请你选择性别{{sex}}|请输入数字",
regexp_num:/^[0-9]+$/,
// 验证条件
rules: 'required|regexp_num'
}
],function(obj,evt){
if(obj.errors){
// 判断是否错误
}
})
validator.validate()
参考
借鉴这些优秀的库,撸出此玩意儿。
- chriso/validator.js一个字符串验证器和转换类型的库
- rickharrison/validate.js validate.js是一个轻量级的JavaScript表单验证库灵感来源CodeIgniter。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].