adminPage-vue3依赖FormPage说明文档,表单页快速开发,使用思路及范例(Ⅲ)formConfig校验配置项
Exposes
validate
本方法为校验函数,返回当前表单校验结果
校验通过时返回true
校验失败返回false
返回结果为Promise 请注意处理
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
async function validateDate() {
const isOk = await FormPageRef.value.validate()
console.log('isOk', isOk)
}
const config = [
{
label: '输入',
key: 'input',
isMinusNumber: 1,
},
]
</script>
<style lang="scss" scoped></style>
属性: formConfig(表单项设置)
搜索项设置接收数组类型,每项设置均为对象,结构为
{
notNull:Boolean,
isInt:Boolean,
isNumber:Boolean || Number,
isMinusNumber:Boolean || Number,
//以下配置请查阅formConfig基础配置项
key:String,
label:String,
type:String || VueComponent || 'times' || 'slot', // type:'input' || type:ElInput || type:'times' || type:'slot'
noLabel:Boolean,
defaultValue:Any,
bind:Object,
childSlot:String,
// type='times'
startDefaultValue:String,
endDefaultValue:String,
startBind:Object,
endBind:Object,
startKey:String,
endKey:String,
// type='slot'
slotName:String,
}
notNull 必填校验
notNull
接收布尔值,当·notNull·为true且该项未输入时,将抛出异常
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
FormPageRef.value.validate()
}
const config = [
{
label: '输入',
key: 'input',
notNull: true,
},
]
</script>
<style lang="scss" scoped></style>
isInt整数校验(不可负数)
isInt
接收布尔值,当isInt
为true且该项输入非正整数,将抛出异常
注意:该参数不作为必填项校验,若必填校验请单独声明notNull
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
FormPageRef.value.validate()
}
const config = [
{
label: '输入',
key: 'input',
isInt: true,
},
]
</script>
<style lang="scss" scoped></style>
isNumber 数值校验(可小数)(不可负数)
isNumber
接收布尔值或正整数,当·isNumber ·为true或Number 且该项输入非数值,将抛出异常
注意:该参数不作为必填项校验,若必填校验请单独声明notNull
不限制长度
isNumber
接收布尔值时,当isNumber
为true且该项输入非数值,将抛出异常
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
FormPageRef.value.validate()
}
const config = [
{
label: '输入',
key: 'input',
isNumber: true,
},
]
</script>
<style lang="scss" scoped></style>
限制长度
isNumber
接收正整数时,将限制用户输入小数长度,将抛出异常
注意:此长度仅限制小数部分,整数长度不包含在内
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
FormPageRef.value.validate()
}
const config = [
{
label: '输入',
key: 'input',
isNumber: 1,
},
]
</script>
<style lang="scss" scoped></style>
isMinusNumber 数值校验(可小数)(可负数)
isMinusNumber
接收布尔值或正整数,当·isMinusNumber ·为true或Number 且该项输入非数值,将抛出异常
注意:该参数不作为必填项校验,若必填校验请单独声明notNull
不限制长度
isMinusNumber
接收布尔值时,当isMinusNumber
为true且该项输入非数值,将抛出异常
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
FormPageRef.value.validate()
}
const config = [
{
label: '输入',
key: 'input',
isMinusNumber: true,
},
]
</script>
<style lang="scss" scoped></style>
限制长度
isMinusNumber
接收正整数时,将限制用户输入小数长度,将抛出异常
注意:此长度仅限制小数部分,整数长度不包含在内
<template>
<div>
<div style="padding: 10px">
<FormPage ref="FormPageRef" v-model="formData" :formConfig="config" />
<el-button type="primary" @click="validateDate">校验</el-button>
</div>
</div>
</template>
<script setup>
import { FormPage } from 'page-vue3'
const formData = ref({})
const FormPageRef = ref(null)
function validateDate() {
FormPageRef.value.validate()
}
const config = [
{
label: '输入',
key: 'input',
isMinusNumber: 1,
},
]
</script>
<style lang="scss" scoped></style>