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

Commit c75480f

Browse files
kazuponkazupon
committed
feat(custom): support global error message
1 parent 661b60a commit c75480f

File tree

3 files changed

+156
-27
lines changed

3 files changed

+156
-27
lines changed

‎src/validation.js

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,22 +53,44 @@ export default class Validation {
5353
}
5454

5555
validate () {
56-
const extend = util.Vue.util.extend
57-
let ret = Object.create(null)
56+
const _ = util.Vue.util
57+
58+
let results = Object.create(null)
5859
let messages = Object.create(null)
5960
let valid = true
6061

6162
each(this.validators, (descriptor, name) => {
62-
let validator = this._resolveValidator(name)
63-
let res = validator.call(this.dir.vm, this.el.value, descriptor.arg)
64-
if (!res) {
65-
valid = false
66-
let msg = descriptor.msg
67-
if (msg) {
68-
messages[name] = typeof msg === 'function' ? msg() : msg
63+
let asset = this._resolveValidator(name)
64+
let validator = null
65+
let msg = null
66+
67+
if (_.isPlainObject(asset)) {
68+
if (asset.check && typeof asset.check === 'function') {
69+
validator = asset.check
70+
}
71+
if (asset.message) {
72+
msg = asset.message
73+
}
74+
} else if (typeof asset === 'function') {
75+
validator = asset
76+
}
77+
78+
if (descriptor.msg) {
79+
msg = descriptor.msg
80+
}
81+
82+
if (validator) {
83+
let ret = validator.call(this.dir.vm, this.el.value, descriptor.arg)
84+
if (!ret) {
85+
valid = false
86+
if (msg) {
87+
messages[name] = typeof msg === 'function'
88+
? msg.call(this.dir.vm, this.model, descriptor.arg)
89+
: msg
90+
}
6991
}
92+
results[name] = !ret
7093
}
71-
ret[name] = !res
7294
}, this)
7395

7496
trigger(this.el, valid ? 'valid' : 'invalid')
@@ -85,9 +107,9 @@ export default class Validation {
85107
if (!empty(messages)) {
86108
props.messages = messages
87109
}
88-
extend(ret, props)
110+
_.extend(results, props)
89111

90-
return ret
112+
return results
91113
}
92114

93115
_resolveValidator (name) {

‎test/specs/custom.js

Lines changed: 116 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,125 @@ describe('custom', () => {
4545
})
4646

4747

48-
describe('caml-case', () => {
49-
it.skip('should be validated', (done) => {
50-
// TODO:
51-
done()
48+
describe('with message', () => {
49+
context('string', () => {
50+
beforeEach((done) => {
51+
Vue.validator('numeric', {
52+
message: 'invalid numeric value',
53+
check (val) {
54+
return /^[-+]?[0-9]+$/.test(val)
55+
}
56+
})
57+
58+
el.innerHTML =
59+
'<validator name="validator1">' +
60+
'<form novalidate>' +
61+
'<input type="text" value="hi" v-validate:field1="[\'numeric\']">' +
62+
'</form>' +
63+
'</validator>'
64+
vm = new Vue({
65+
el: el
66+
})
67+
vm.$nextTick(done)
68+
})
69+
70+
it('should be validated', (done) => {
71+
assert(vm.$validator1.field1.numeric === true)
72+
assert(vm.$validator1.field1.messages.numeric === 'invalid numeric value')
73+
74+
let input = el.getElementsByTagName('input')[0]
75+
input.value = '10'
76+
trigger(input, 'input')
77+
vm.$nextTick(() => {
78+
assert(vm.$validator1.field1.numeric === false)
79+
assert(vm.$validator1.field1.messages === undefined)
80+
done()
81+
})
82+
})
5283
})
53-
})
5484

85+
context('function', () => {
86+
beforeEach((done) => {
87+
Vue.validator('numeric', {
88+
message (field) {
89+
return this.format + field
90+
},
91+
check (val) {
92+
return /^[-+]?[0-9]+$/.test(val)
93+
}
94+
})
95+
96+
el.innerHTML =
97+
'<validator name="validator1">' +
98+
'<form novalidate>' +
99+
'<input type="text" value="hi" v-validate:field1="[\'numeric\']">' +
100+
'</form>' +
101+
'</validator>'
102+
vm = new Vue({
103+
el: el,
104+
data: {
105+
format: 'invalid numeric value : '
106+
}
107+
})
108+
vm.$nextTick(done)
109+
})
55110

56-
describe('kebab-case', () => {
57-
it.skip('should be validated', (done) => {
58-
// TODO:
59-
done()
111+
it('should be validated', (done) => {
112+
assert(vm.$validator1.field1.numeric === true)
113+
assert(vm.$validator1.field1.messages.numeric === (vm.format + 'field1'))
114+
115+
let input = el.getElementsByTagName('input')[0]
116+
input.value = '10'
117+
trigger(input, 'input')
118+
vm.$nextTick(() => {
119+
assert(vm.$validator1.field1.numeric === false)
120+
assert(vm.$validator1.field1.messages === undefined)
121+
done()
122+
})
123+
})
124+
})
125+
126+
context('build-in', () => {
127+
let org
128+
beforeEach((done) => {
129+
let org = Vue.validator('required')
130+
let required = {
131+
message (field) {
132+
return 'required ' + field
133+
},
134+
}
135+
required.check = org
136+
Vue.validator('required', required)
137+
138+
el.innerHTML =
139+
'<validator name="validator1">' +
140+
'<form novalidate>' +
141+
'<input type="text" value="" v-validate:field1="[\'required\']">' +
142+
'</form>' +
143+
'</validator>'
144+
vm = new Vue({
145+
el: el
146+
})
147+
vm.$nextTick(done)
148+
})
149+
150+
afterEach(() => {
151+
Vue.validator('required', org)
152+
})
153+
154+
it('should be validated', (done) => {
155+
assert(vm.$validator1.field1.required === true)
156+
assert(vm.$validator1.field1.messages.required === 'required field1')
157+
158+
let input = el.getElementsByTagName('input')[0]
159+
input.value = '10'
160+
trigger(input, 'input')
161+
vm.$nextTick(() => {
162+
assert(vm.$validator1.field1.required === false)
163+
assert(vm.$validator1.field1.messages === undefined)
164+
done()
165+
})
166+
})
60167
})
61168
})
62169
})

‎test/specs/messages.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe('messages', () => {
1515
'<input type="text" group="group2" v-validate:field3="field3">' +
1616
'<input type="text" group="group2" v-validate:field4="field4">' +
1717
'<input type="text" group="group1" value="0" v-validate:field5="{ min: { rule :1, message: message1 } }">' +
18-
'<input type="text" group="group2" value="h" v-validate:field6="{ minlength: { rule: 4, message: onMessage2 } }">' +
18+
'<input type="text" group="group2" value="foo" v-validate:field6="{ minlength: { rule: 4, message: onMessage2 } }">' +
1919
'<ul><li v-for="msg in $validation.messages">' +
2020
'<div v-for="val in msg"><p>{{$key}}:{{val}}</p></div>' +
2121
'</li></ul>' +
@@ -34,8 +34,8 @@ describe('messages', () => {
3434
}
3535
},
3636
methods: {
37-
onMessage2 () {
38-
return 'field6 short too'
37+
onMessage2 (field) {
38+
return 'field6 short too ' + field
3939
}
4040
}
4141
})
@@ -64,7 +64,7 @@ describe('messages', () => {
6464
assert(vm.$validation.field3.messages.max === vm.field3.max.message)
6565
assert(vm.$validation.field4.messages.maxlength === vm.field4.maxlength.message)
6666
assert(vm.$validation.field5.messages.min === vm.message1)
67-
assert(vm.$validation.field6.messages.minlength === vm.onMessage2())
67+
assert(vm.$validation.field6.messages.minlength === vm.onMessage2('field6'))
6868
})
6969
})
7070

@@ -75,7 +75,7 @@ describe('messages', () => {
7575
assert(vm.$validation.messages.field3.max === vm.field3.max.message)
7676
assert(vm.$validation.messages.field4.maxlength === vm.field4.maxlength.message)
7777
assert(vm.$validation.messages.field5.min === vm.message1)
78-
assert(vm.$validation.messages.field6.minlength === vm.onMessage2())
78+
assert(vm.$validation.messages.field6.minlength === vm.onMessage2('field6'))
7979
})
8080
})
8181

@@ -86,7 +86,7 @@ describe('messages', () => {
8686
assert(vm.$validation.group1.messages.field5.min === vm.message1)
8787
assert(vm.$validation.group2.messages.field3.max === vm.field3.max.message)
8888
assert(vm.$validation.group2.messages.field4.maxlength === vm.field4.maxlength.message)
89-
assert(vm.$validation.group2.messages.field6.minlength === vm.onMessage2())
89+
assert(vm.$validation.group2.messages.field6.minlength === vm.onMessage2('field6'))
9090
})
9191
})
9292
})

0 commit comments

Comments
 (0)