# validator-js

**Repository Path**: kennylee/validator-js

## Basic Information

- **Project Name**: validator-js
- **Description**: 轻量，快捷，易扩展的前端的验证工具，无其他包依赖无样式，可以适合绝大部分使用情景，开发人员可根据项目环境自行组装反馈的错误信息给用户。
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 46
- **Forks**: 6
- **Created**: 2017-09-04
- **Last Updated**: 2024-09-03

## Categories & Tags

**Categories**: javascript-toolkits

**Tags**: None

## README

# Validator-js

前端的验证工具，无其他包依赖无样式，可以适合任何环境，可根据项目环境自行组装提示信息反馈给用户。

兼容IE6以上版及目前流行的浏览器。

### usage:

在 `input` 和 `select` 元素上，添加 `data-validator-options` 属性，然后编写json的验证器配置信息，例如:

```html
<input id="login_name" name="login_name"
    data-validator-options="required:true,validType:['loginName','length[6,32]']" >
```

* required

    代表验证必填项。

* validType

    验证的规则组合，`string` 的数组，注意格式！其中 `length[6,32]` 的意思是，使用 `length` 验证规则，并且传入参数为 `6` 和 `32`。

**更多验证规则可自行扩展**，详细使用例子：[参见](src/html/demo.html)

在线体验: [http://jsrun.net/PYiKp](http://jsrun.net/PYiKp)

### Todo List 

- [ ] INPUT/SELECT元素，支持*maxLength*和HTML5中一些基础验证属性，*required*和*pattern*。
- [ ] 支持*min*和*max*，这两个HTML5中对于number和date的验证属性。 
- [x] 精炼代码，替换ES6环境。
- [ ] 支持AMD和CMD。

### 此项目中的经历

1. #### 前端的ES6开发环境

	虽然可以通过babel来实现ES6的基础语法环境，但在转码的过程中，由于一些API，如`Symbol`不能使用，导致转码后的代码不能使用。另外前端环境上也用不了 _Polyfill_ ，撇开前端js代码中能不能加上这个包(不过你有方法不妨告知，谢谢！)，但为了使用一些ES6语法而加上这个庞然大物也是有点尴尬的。
	
	再加上需要兼容 _IE6-8_ 甚至用forEach都比较困难，最后作出不得不扩展Array对象的决定。**所以，用这个包的话，在IE6-8环境下会对Array扩展forEach方法，不喜的童鞋需要注意！**
	
	总结，编写前端框架用babel的体验并不是太好，一边要原生API兼容性问题，一边还要留意转码后的兼容问题，顾虑反而增加了。还不如不用而专注浏览器对原生API的兼容问题好过。当然，也有部分原因是对babel转码特性不熟悉的关系，熟悉后可能后会好点，但换来语法环境值不值得就见仁见智了。