Skip to content
This repository was archived by the owner on Dec 25, 2017. It is now read-only.

Commit 4635ce4

Browse files
kazuponkazupon
committed
feat(api): update $validate API
1 parent 46d153e commit 4635ce4

File tree

3 files changed

+156
-23
lines changed

3 files changed

+156
-23
lines changed

‎src/validations/base.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,10 @@ export default class BaseValidation {
7676
}
7777
}
7878

79-
willUpdateFlags () {
79+
willUpdateFlags (touched = false) {
80+
if (touched) {
81+
this.willUpdateTouched(this._el, 'blur')
82+
}
8083
this.willUpdateDirty(this._el)
8184
this.willUpdateModified(this._el)
8285
}

‎src/validator.js

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,22 @@ export default class Validator {
4343
}
4444

4545
// define the validate manually meta method to vue instance
46-
this._dir.vm.$validate = (field) => {
47-
this._validate(field)
46+
this._dir.vm.$validate = (...args) => {
47+
let field = null
48+
let touched = false
49+
50+
if (args.length === 1) {
51+
if (typeof args[0] === 'string') {
52+
field = args[0]
53+
} else if (typeof args[0] === 'boolean') {
54+
touched = args[0]
55+
}
56+
} else if (args.length === 2) {
57+
field = args[0]
58+
touched = args[1]
59+
}
60+
61+
this._validate(field, touched)
4862
}
4963

5064
// define manually the validation errors
@@ -79,30 +93,37 @@ export default class Validator {
7993
}, this)
8094
}
8195

82-
_validate (field) {
83-
let validation = this._validations[field]
84-
if (!validation && this._checkboxValidations[field]) {
85-
validation = this._checkboxValidations[field].validation
86-
} else if (!validation && this._radioValidations[field]) {
87-
validation = this._radioValidations[field].validation
88-
}
96+
_validate (field, touched) {
97+
if (!field) { // all
98+
each(this.validations, (validation, key) => {
99+
validation.willUpdateFlags(touched)
100+
})
101+
this.validate()
102+
} else { // each field
103+
let validation = this._validations[field]
104+
if (!validation && this._checkboxValidations[field]) {
105+
validation = this._checkboxValidations[field].validation
106+
} else if (!validation && this._radioValidations[field]) {
107+
validation = this._radioValidations[field].validation
108+
}
89109

90-
if (validation) {
91-
validation.willUpdateFlags()
92-
let res = validation.validate()
93-
util.Vue.set(this._scope, field, res)
110+
if (validation) {
111+
validation.willUpdateFlags(touched)
112+
let res = validation.validate()
113+
util.Vue.set(this._scope, field, res)
94114

95-
if (this._scope.dirty) {
96-
this._fireEvent('dirty')
97-
}
115+
if (this._scope.dirty) {
116+
this._fireEvent('dirty')
117+
}
98118

99-
if (this._modified !== this._scope.modified) {
100-
this._fireEvent('modified', this._scope.modified)
101-
this._modified = this._scope.modified
102-
}
119+
if (this._modified !== this._scope.modified) {
120+
this._fireEvent('modified', this._scope.modified)
121+
this._modified = this._scope.modified
122+
}
103123

104-
let valid = this._scope.valid
105-
this._fireEvent((valid ? 'valid' : 'invalid'))
124+
let valid = this._scope.valid
125+
this._fireEvent((valid ? 'valid' : 'invalid'))
126+
}
106127
}
107128
}
108129

‎test/specs/validate.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,4 +248,113 @@ describe('$validate', () => {
248248
})
249249
})
250250
})
251+
252+
253+
describe('arguments', () => {
254+
beforeEach((done) => {
255+
el.innerHTML =
256+
'<validator name="validator1">' +
257+
'<form novalidate>' +
258+
'<input type="number" v-validate:field1="{ required: true, min: 0, max: 10 }">' +
259+
'<input type="text" value="hello" v-validate:field2="{ minlength: 4 }">' +
260+
'</form>' +
261+
'</validator>'
262+
vm = new Vue({ el: el })
263+
vm.$nextTick(done)
264+
})
265+
266+
describe('not specify', () => {
267+
it('should be validated', (done) => {
268+
assert(vm.$validator1.field1.required)
269+
assert(vm.$validator1.field1.min === false)
270+
assert(vm.$validator1.field1.max === false)
271+
assert(vm.$validator1.field1.valid === false)
272+
assert(vm.$validator1.field1.dirty === false)
273+
assert(vm.$validator1.field1.modified === false)
274+
assert(vm.$validator1.field1.touched === false)
275+
assert(vm.$validator1.field2.minlength === false)
276+
assert(vm.$validator1.field2.valid === true)
277+
assert(vm.$validator1.field2.dirty === false)
278+
assert(vm.$validator1.field2.modified === false)
279+
assert(vm.$validator1.field2.touched === false)
280+
assert(vm.$validator1.valid === false)
281+
assert(vm.$validator1.dirty === false)
282+
assert(vm.$validator1.modified === false)
283+
assert(vm.$validator1.touched === false)
284+
285+
let field1 = el.getElementsByTagName('input')[0]
286+
let field2 = el.getElementsByTagName('input')[1]
287+
field1.value = '11'
288+
field2.value = 'hi'
289+
vm.$nextTick(() => {
290+
vm.$validate()
291+
292+
assert(vm.$validator1.field1.required === false)
293+
assert(vm.$validator1.field1.min === false)
294+
assert(vm.$validator1.field1.max === true)
295+
assert(vm.$validator1.field1.valid === false)
296+
assert(vm.$validator1.field1.dirty === true)
297+
assert(vm.$validator1.field1.modified === true)
298+
assert(vm.$validator1.field1.touched === false)
299+
assert(vm.$validator1.field2.minlength === true)
300+
assert(vm.$validator1.field2.valid === false)
301+
assert(vm.$validator1.field2.dirty === true)
302+
assert(vm.$validator1.field2.modified === true)
303+
assert(vm.$validator1.field2.touched === false)
304+
assert(vm.$validator1.valid === false)
305+
assert(vm.$validator1.dirty === true)
306+
assert(vm.$validator1.modified === true)
307+
assert(vm.$validator1.touched === false)
308+
309+
done()
310+
})
311+
})
312+
})
313+
314+
describe('touched', () => {
315+
it('should be validated', (done) => {
316+
assert(vm.$validator1.field1.required)
317+
assert(vm.$validator1.field1.min === false)
318+
assert(vm.$validator1.field1.max === false)
319+
assert(vm.$validator1.field1.valid === false)
320+
assert(vm.$validator1.field1.dirty === false)
321+
assert(vm.$validator1.field1.modified === false)
322+
assert(vm.$validator1.field1.touched === false)
323+
assert(vm.$validator1.field2.minlength === false)
324+
assert(vm.$validator1.field2.valid === true)
325+
assert(vm.$validator1.field2.dirty === false)
326+
assert(vm.$validator1.field2.modified === false)
327+
assert(vm.$validator1.field2.touched === false)
328+
assert(vm.$validator1.valid === false)
329+
assert(vm.$validator1.dirty === false)
330+
assert(vm.$validator1.modified === false)
331+
assert(vm.$validator1.touched === false)
332+
333+
let field2 = el.getElementsByTagName('input')[1]
334+
field2.value = 'hi'
335+
vm.$nextTick(() => {
336+
vm.$validate('field2', true)
337+
338+
assert(vm.$validator1.field1.required)
339+
assert(vm.$validator1.field1.min === false)
340+
assert(vm.$validator1.field1.max === false)
341+
assert(vm.$validator1.field1.valid === false)
342+
assert(vm.$validator1.field1.dirty === false)
343+
assert(vm.$validator1.field1.modified === false)
344+
assert(vm.$validator1.field1.touched === false)
345+
assert(vm.$validator1.field2.minlength === true)
346+
assert(vm.$validator1.field2.valid === false)
347+
assert(vm.$validator1.field2.dirty === true)
348+
assert(vm.$validator1.field2.modified === true)
349+
assert(vm.$validator1.field2.touched === true)
350+
assert(vm.$validator1.valid === false)
351+
assert(vm.$validator1.dirty === true)
352+
assert(vm.$validator1.modified === true)
353+
assert(vm.$validator1.touched === true)
354+
355+
done()
356+
})
357+
})
358+
})
359+
})
251360
})

0 commit comments

Comments
 (0)