adminPage-vue3依赖FormPage说明文档，表单页快速开发，使用思路及范例（Ⅲ）校验相关处理

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>