├── .gitignore
├── LICENSE
├── validator.html
├── README.md
└── js
└── ldvalidator.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | .idea
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 零度逍遥
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/validator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | LDValidator
6 |
7 |
8 |
9 |
21 |
22 |
23 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # LDValidate
2 | 小巧的表单验证组件，使用原生js，不需要任何类库，只做验证工作，不涉及UI
3 |
4 | ## 1. 创建实例
5 | ```
6 | let formValidator = new LDValidator(id, options);
7 | ```
8 |
9 | - id 需要验证表单的父级元素id
10 | - options
11 |
12 | | 参数 | 类型 | 说明|
13 | | :----: | :----: | :----: |
14 | | name | Object | 见下方name |
15 |
16 | - name 需要验证元素的name值
17 |
18 | | 参数 | 类型 | 说明|
19 | | :----: | :----: | :----: |
20 | | required | Boolean | 是否必填|
21 | | msg | String | 必填验证不通过时错误提示 |
22 | | equal | Object | 见下方equal |
23 | | scopes | Array | 见下方scopes |
24 | | patterns | Array | 见下方patterns |
25 |
26 | - equal 判断是否与另一元素相等，例验证password和repassword
27 |
28 | | 参数 | 类型 | 说明|
29 | | :----: | :----: | :----: |
30 | | name | String | 对比判断的表单元素name |
31 | | msg | String | 相等验证不通过时错误提示 |
32 |
33 | - scopes 判断表单元素值是否在某一个范围内
34 |
35 | | 参数 | 类型 | 说明|
36 | | :----: | :----: | :----: |
37 | | | Object | 最小值的Object |
38 | | min | Number | 最小值 |
39 | | msg | String | 最小值验证不通过时错误提示 |
40 | | | Object | 最大值的Object |
41 | | max | Number | 最大值 |
42 | | msg | String | 最大值验证不通过时错误提示 |
43 |
44 | - patterns 判断表单元素值是否符合某个正则
45 |
46 | | 参数 | 类型 | 说明|
47 | | :----: | :----: | :----: |
48 | | | Object | |
49 | | reg | Reg | 正则表达式 |
50 | | msg | String | 验证不通过时错误提示 |
51 |
52 | ## 2. 验证方法
53 | ```
54 | formValidator.validate();
55 | ```
56 |
57 |
58 | ## 3. 获取验证结果
59 | ```
60 | formValidator.isPass;
61 | ```
62 |
63 | ## 4. 验证结果对象
64 | ```
65 | formValidator.validation;
66 | ```
67 |
68 | - validation
69 |
70 | | 参数 | 类型 | 说明|
71 | | :----: | :----: | :----: |
72 | | msg | String | 验证不通过时错误提示 |
73 | | valid | Boolean | 表单是否验证通过 |
74 | | name | Object | 见下方name |
75 |
76 | - name 验证元素的name值
77 |
78 | | 参数 | 类型 | 说明|
79 | | :----: | :----: | :----: |
80 | | msg | String | 验证不通过时错误提示 |
81 | | valid | Boolean | 表单是否验证通过 |
82 |
83 | ## 示例（可参考 [validator.html](https://github.com/lingdublog/LDValidate/blob/master/validator.html) ）
84 | ```
85 | 提交
88 |
89 | var formValidator = new Validator({
90 | age: {
91 | required: true,
92 | msg: 'age必填',
93 | scopes:[{
94 | min: 20,
95 | msg: 'age必须大于20'
96 | }, {
97 | max: 30,
98 | msg: 'age必须小于30'
99 | }],
100 | patterns: [{
101 | reg: /^[0-9]+$/,
102 | msg: 'age请填入数字'
103 | }],
104 | },
105 | name: {
106 | required: true,
107 | msg: 'name必填'
108 | }
109 | })
110 |
111 | function submit (){
112 | // 必须先执行这一步
113 | formValidator.validate();
114 | // 这里才能获得结果
115 | if(formValidator.isPass){
116 | console.log('通过');
117 | }else{
118 | console.log(formValidator.validation.msg);
119 | console.log(formValidator.validation.age.msg);
120 | console.log(formValidator.validation.name.msg);
121 | }
122 | }
123 | ```
124 |
125 | ## 在线示例
126 | [表单验证](http://works.lingdublog.cc/validator/validator.html)
--------------------------------------------------------------------------------
/js/ldvalidator.js:
--------------------------------------------------------------------------------
1 | window.LDValidator = Validator;
2 |
3 | // 表单验证
4 | function Validator(parentId, options){
5 | this.parent = document.getElementById(parentId);
6 | // 保存最终验证对象
7 | this.validation = {valid: false, msg: ''};
8 | this.options = options;
9 | }
10 |
11 | Validator.prototype.doValidate = function(eleName, validateObj){
12 | let self = this;
13 | let value = self.parent.querySelector('[name=' + eleName + ']').value.replace(/(^\s*)|(\s*$)/g, '');
14 | // 判断必填选项
15 | if(validateObj.required){
16 | if(/\S/.test(value)){
17 | self.setTrue(eleName);
18 | }else{
19 | self.setFalse(eleName, validateObj.msg);
20 | return;
21 | }
22 | }
23 | // 判断是否与某值相等
24 | if (validateObj.equal) {
25 | let equalValue = self.parent.querySelector('[name=' + validateObj.equal.name + ']').value.replace(/(^\s*)|(\s*$)/g, '');
26 | if (value === equalValue) {
27 | self.setTrue(eleName);
28 | }else{
29 | self.setFalse(eleName, validateObj.equal.msg);
30 | return;
31 | }
32 | }
33 | // 判断范围
34 | if(validateObj.scopes && !isNaN(value)){
35 | for(let j in validateObj.scopes){
36 | if(validateObj.scopes[j].min){
37 | if(validateObj.scopes[j].min <= Number(value)){
38 | self.setTrue(eleName);
39 | }else{
40 | self.setFalse(eleName, validateObj.scopes[j].msg);
41 | return;
42 | }
43 | }
44 | if(validateObj.scopes[j].max){
45 | if(validateObj.scopes[j].max >= Number(value)){
46 | self.setTrue(eleName);
47 | }else{
48 | self.setFalse(eleName, validateObj.scopes[j].msg);
49 | return;
50 | }
51 | }
52 | }
53 | }
54 | // 判断正则选项
55 | if(validateObj.patterns){
56 | for(let i in validateObj.patterns){
57 | if(validateObj.patterns[i].reg.test(value)){
58 | self.setTrue(eleName);
59 | }else{
60 | self.setFalse(eleName, validateObj.patterns[i].msg);
61 | return;
62 | }
63 | }
64 | }
65 | };
66 |
67 |
68 | // 触发验证
69 | Validator.prototype.validate = function(eleId){
70 | // 如果存在id，只验证此id，否则验证全部
71 | if(eleId){
72 | for(let k in arguments){
73 | this.validation[arguments[k]] = {valid: false, msg: ''};
74 | this.doValidate(arguments[k], this.options[arguments[k]]);
75 | }
76 |
77 | }else{
78 | for(let i in this.options){
79 | this.validation[i] = {valid: false, msg: ''};
80 | this.doValidate(i, this.options[i]);
81 | }
82 | }
83 | // 计算最终结果的唯一标识
84 | for(let j in this.validation){
85 | if(typeof this.validation[j] === 'object'){
86 | if(this.validation[j].valid){
87 | this.validation.valid = true;
88 | this.validation.msg = '';
89 | }else{
90 | this.validation.valid = false;
91 | this.validation.msg = this.validation[j].msg;
92 | break;
93 | }
94 | }
95 | }
96 | this.isPass = this.validation.valid;
97 | };
98 |
99 |
100 | // 相关方法
101 | Validator.prototype.setTrue = function (eleName){
102 | this.validation[eleName].valid = true;
103 | this.validation[eleName].msg = '';
104 | };
105 | Validator.prototype.setFalse = function (eleName, msg){
106 | this.validation[eleName].valid = false;
107 | this.validation[eleName].msg = msg;
108 | };
109 |
--------------------------------------------------------------------------------