mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-27 05:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #48 from wanli-song/develop

Browse Source 
modify(form):support async validate
This commit is contained in:
07akioni 2020-02-24 10:51:23 +08:00 committed by GitHub Enterprise
commit 6a602a65ff
5 changed files with 210 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/documentation/components/form/enUS/index.md
View File

@ -7,6 +7,7 @@ inline
custom-rule
top
left
validator
```
## Props
### Form Props

100
demo/documentation/components/form/enUS/validator.md Normal file
View File

@ -0,0 +1,100 @@
# validate Form
Support async. Make sure your code in `return new Promise()`.
```html
<n-form
inline
:label-width="80"
:model="formValue"
:rules="rules"
ref="form"
>
<n-form-item label="Name" path="user.name">
<n-input v-model="formValue.user.name" placeholder="Input Name" />
</n-form-item>
<n-form-item label="Age" path="user.age">
<n-input placeholder="Input Age" v-model="formValue.user.age"/>
</n-form-item>
<n-form-item label="Adress" path="user.address">
<n-input placeholder="Input Address" v-model="formValue.user.address"/>
</n-form-item>
<n-form-item label="Phone" path="phone">
<n-input placeholder="Phone Number" v-model="formValue.phone"/>
</n-form-item>
<n-form-item v-model="formValue.phone">
<n-button @click="handleValidateClick">Validate</n-button>
</n-form-item>
</n-form>
<pre>
{{ JSON.stringify(formValue, 0, 2) }}
</pre>
```
```js
export default {
data () {
return {
formValue: {
user: {
name: 'name',
age: '15',
address: '0'
},
phone: '1251550092'
},
rules: {
user: {
name: {
required: true,
trigger: 'blur',
validator: (rule, value) => {
return new Promise((resolve, reject) => {
if (value !== 'testName') {
reject('error name') // reject with error message
} else {
resolve()
}
})
}
},
age: {
required: true,
trigger: 'input',
validator: (rule, value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value <= 16) {
reject('error age')
} else {
resolve()
}
}, 3000)
})
}
},
},
phone: {
required: true,
trigger: ['input'],
validator: (rule, value) => {
return /^[1]+[3,8]+\\d{9}$/.test(value)
}
}
}
}
},
methods: {
handleValidateClick (e) {
e.preventDefault()
this.$refs.form.validate(errors => {
if (!errors) {
this.$NMessage.success('Valid')
} else {
this.$NMessage.error('Invalid')
console.log('errors', errors)
}
})
console.log('end')
}
}
}
```

1
demo/documentation/components/form/zhCN/index.md
View File

@ -8,6 +8,7 @@ inline
custom-rule
top
left
validator
```
## Props
### Form Props

100
demo/documentation/components/form/zhCN/validator.md Normal file
View File

@ -0,0 +1,100 @@
# validate Form
支持异步. 需要确保你的代码写在 `return new Promise()`里.
```html
<n-form
inline
:label-width="80"
:model="formValue"
:rules="rules"
ref="form"
>
<n-form-item label="Name" path="user.name">
<n-input v-model="formValue.user.name" placeholder="Input Name" />
</n-form-item>
<n-form-item label="Age" path="user.age">
<n-input placeholder="Input Age" v-model="formValue.user.age"/>
</n-form-item>
<n-form-item label="Adress" path="user.address">
<n-input placeholder="Input Address" v-model="formValue.user.address"/>
</n-form-item>
<n-form-item label="Phone" path="phone">
<n-input placeholder="Phone Number" v-model="formValue.phone"/>
</n-form-item>
<n-form-item v-model="formValue.phone">
<n-button @click="handleValidateClick">Validate</n-button>
</n-form-item>
</n-form>
<pre>
{{ JSON.stringify(formValue, 0, 2) }}
</pre>
```
```js
export default {
data () {
return {
formValue: {
user: {
name: 'name',
age: '15',
address: '0'
},
phone: '1251550092'
},
rules: {
user: {
name: {
required: true,
trigger: 'blur',
validator: (rule, value) => {
return new Promise((resolve, reject) => {
if (value !== 'testName') {
reject('非正确名字') // reject with error message
} else {
resolve()
}
})
}
},
age: {
required: true,
trigger: 'input',
validator: (rule, value) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (value <= 16) {
reject('非正确年龄')
} else {
resolve()
}
}, 3000)
})
}
},
},
phone: {
required: true,
trigger: ['input'],
validator: (rule, value) => {
return /^[1]+[3,8]+\\d{9}$/.test(value)
}
}
}
}
},
methods: {
handleValidateClick (e) {
e.preventDefault()
this.$refs.form.validate(errors => {
if (!errors) {
this.$NMessage.success('Valid')
} else {
this.$NMessage.error('Invalid')
console.log('errors', errors)
}
})
console.log('end')
}
}
}
```

13
src/Form/src/FormItem.vue
View File

@ -57,6 +57,7 @@ import get from 'lodash-es/get'
import registerable from '../../_mixins/registerable'
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import cloneDeep from 'lodash-es/cloneDeep'
export default {
name: 'NFormItem',
@ -282,7 +283,7 @@ export default {
} else {
if (!options.first) options.first = this.first
}
const rules = this.syntheticRules
const rules = cloneDeep(this.syntheticRules)
const path = this.path
const value = get(this.NForm.model, this.path, null)
const activeRules = (!trigger
@ -298,11 +299,13 @@ export default {
const originValidator = rule.validator
if (typeof originValidator === 'function') {
rule.validator = (...args) => {
const validateResult = originValidator(...args)
if (validateResult instanceof Error) {
return validateResult
let validateResult = null
try {
validateResult = originValidator(...args)
} catch (err) {
console.error(err)
}
return !!validateResult
return validateResult
}
}
return rule