mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(form): support validate callback

Browse Source
This commit is contained in:
07akioni 2019-11-27 17:23:24 +08:00
parent 98f4119097
commit ac5d6dc0c5
8 changed files with 173 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
demo/documentation/components/form/enUS/customRule.md
View File

@ -76,12 +76,29 @@ export default {
methods: {
handlePasswordInput () {
if (this.model.reenteredPassword) {
this.$refs.reenteredPassword.validate('password-input')
this.$refs.reenteredPassword.validate('password-input', ({
valid,
errors
}) => {
if (valid) {
this.$NMessage.success('password ok')
} else {
console.log(errors)
this.$NMessage.error('password not ok')
}
})
}
},
handleValidateButtonClick (e) {
e.preventDefault()
this.$refs.form.validate()
this.$refs.form.validate((valid, errors) => {
console.log(valid, errors)
if (valid) {
this.$NMessage.success(String(valid))
} else {
this.$NMessage.error(String(valid))
}
})
},
validatePasswordStartWith (rule, value) {
return this.model.password && this.model.password.startsWith(value) && this.model.password.length >= value.length

9
demo/documentation/components/form/enUS/debug.md
View File

@ -212,7 +212,14 @@ export default {
methods: {
handleValidateButtonClick (e) {
e.preventDefault()
this.$refs.form.validate()
this.$refs.form.validate((valid, errors) => {
console.log(valid, errors)
if (valid) {
this.$NMessage.success(String(valid))
} else {
this.$NMessage.error(String(valid))
}
})
}
}
}

9
demo/documentation/components/form/enUS/inline.md
View File

@ -60,7 +60,14 @@ export default {
methods: {
handleValidateClick (e) {
e.preventDefault()
this.$refs.form.validate()
this.$refs.form.validate((valid, errors) => {
if (valid) {
this.$NMessage.success(String(valid))
} else {
console.log(errors)
this.$NMessage.error(String(valid))
}
})
}
}
}

9
demo/documentation/components/form/enUS/left.md
View File

@ -207,7 +207,14 @@ export default {
methods: {
handleValidateButtonClick (e) {
e.preventDefault()
this.$refs.form.validate()
this.$refs.form.validate((valid, errors) => {
console.log(valid, errors)
if (valid) {
this.$NMessage.success(String(valid))
} else {
this.$NMessage.error(String(valid))
}
})
}
}
}

90
packages/common/Form/src/FormItem.vue
View File

@ -198,20 +198,50 @@ export default {
},
methods: {
handleContentBlur () {
this.validate('blur')
this._validate('blur')
},
handleContentChange () {
this.validate('change')
this._validate('change')
},
handleContentFocus () {
this.validate('focus')
this._validate('focus')
},
handleContentInput () {
this.validate('input')
this._validate('input')
},
validate (trigger = null, options = null) {
validate (trigger = null, afterValidate, options = null) {
return new Promise((resolve, reject) => {
this._validate(trigger, options).then(({
valid,
errors
}) => {
if (valid) {
if (afterValidate) {
afterValidate({
valid
})
} else {
resolve()
}
} else {
if (afterValidate) {
afterValidate({
valid,
errors
})
} else {
// eslint-disable-next-line prefer-promise-reject-errors
reject({
errors
})
}
}
})
})
},
_validate (trigger = null, options = null) {
if (!this.path) {
return
throw new Error('[naive-ui/form-item/validate]: validate form-item without path')
}
if (!options) {
options = {}
@ -221,26 +251,46 @@ export default {
const rules = this.synthesizedRules
const path = this.path
const value = get(this.NForm.model, this.path, null)
const activeRules = !trigger ? rules : rules.filter(rule => {
const activeRules = (!trigger ? rules : rules.filter(rule => {
if (Array.isArray(rule.trigger)) {
return rule.trigger.includes(trigger)
} else {
return rule.trigger === trigger
}
})
if (!activeRules.length) return
const validator = new Schema({ [path]: activeRules })
// console.log(trigger, { [path]: value })
validator.validate({ [path]: value }, options, (errors, fields) => {
// console.log('validate', errors, fields)
// debugger
if (errors && errors.length) {
this.explains = errors.map(error => error.message)
this.validated = true
} else {
this.cleanValidationEffect()
})).map(rule => {
const originValidator = rule.validator
if (typeof originValidator === 'function') {
rule.validator = (...args) => {
const validateResult = originValidator(...args)
if (validateResult instanceof Error) {
return validateResult
}
return !!validateResult
}
}
// callback((errors && errors[0].message) || false, fields)
return rule
})
if (!activeRules.length) {
return Promise.resolve({
valid: true
})
}
const validator = new Schema({ [path]: activeRules })
return new Promise((resolve, reject) => {
validator.validate({ [path]: value }, options, (errors, fields) => {
if (errors && errors.length) {
this.explains = errors.map(error => error.message)
resolve({
valid: false,
errors
})
} else {
this.cleanValidationEffect()
resolve({
valid: true
})
}
})
})
},
cleanValidationEffect () {

21
packages/common/Form/src/FormItemCol.vue
View File

@ -4,15 +4,26 @@ import NCol from '../../Grid/src/Col'
export default {
name: 'NFormItemCol',
functional: true,
render (h, context) {
props: {
...NCol.props,
...NFormItem.props
},
methods: {
validate (...args) {
if (this.$refs.formItem) {
return this.$refs.formItem.validate(...args)
}
}
},
render (h) {
return h(NCol, {
props: context.props,
props: { ...this.$props },
scopedSlots: {
default: () => {
return h(NFormItem, {
props: context.props,
scopedSlots: context.scopedSlots
ref: 'formItem',
props: { ...this.$props },
scopedSlots: this.$scopedSlots
})
}
}

22
packages/common/Form/src/FormItemRow.vue
View File

@ -1,20 +1,32 @@
<script>
import NFormItemCol from './FormItemCol'
import NRow from '../../Grid/src/main'
import NFormItem from './FormItem'
export default {
name: 'NFormItemRow',
functional: true,
render (h, context) {
props: {
...NRow.props,
...NFormItem.props
},
methods: {
validate (...args) {
if (this.$refs.formItemCol) {
return this.$refs.formItemCol.validate(...args)
}
}
},
render (h) {
return h(NRow, {
props: context.props,
props: { ...this.$props },
scopedSlots: {
default: () => h(NFormItemCol, {
ref: 'formItemCol',
props: {
span: 24,
...context.props
...this.$props
},
scopedSlots: context.scopedSlots
scopedSlots: this.$scopedSlots
})
}
})

41
packages/common/Form/src/main.vue
View File

@ -71,22 +71,35 @@ export default {
* @param {Array} scope to specify the scope of validation
* @return {Boolean} validation passed or not
*/
validate (callback, shouldFieldBeValidated = () => true) {
console.log(this.items)
let valid = true
let fields = {}
for (const key of Object.keys(this.items)) {
const formItemInstances = this.items[key]
for (const formItemInstance of formItemInstances) {
if (shouldFieldBeValidated(formItemInstance.path)) {
formItemInstance.validate()
validate (afterValidate, shouldFieldBeValidated = () => true) {
return new Promise((resolve, reject) => {
const validateFormItemInstances = []
for (const key of Object.keys(this.items)) {
const formItemInstances = this.items[key]
for (const formItemInstance of formItemInstances) {
if (formItemInstance.path) {
validateFormItemInstances.push(formItemInstance._validate())
}
}
}
}
if (callback) {
callback(valid, fields)
}
return Promise.resolve(valid)
Promise
.all(validateFormItemInstances)
.then(results => {
if (results.some(result => !result.valid)) {
const errors = results.filter(result => result.errors).map(result => result.errors)
if (afterValidate) {
afterValidate(false, errors)
} else {
reject(errors)
}
} else {
if (afterValidate) afterValidate(true)
else {
resolve()
}
}
})
})
},
resetForm (target = this) {
for (const key of Object.keys(this.items)) {