vue-template

Project setup

npm install ph-form

intro

ph-form {
    PhForm,
    PhValidator,
    PhFormNumberRange,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,
    PhFormGroup,
    PhFormTextarea,
    PhFormInput,
    PhFormSelect,
    PhFormSwitch,
    PhFormColor,
    PhFormCheckbox,
    PhFormRadio,
    PhOption,
    PhCheckboxItem,
    PhRadioItem,
}

demo

<template>
    <ph-form>
        <ph-validator ref="validator">
            <ph-input label="账户名" v-model="account" placeholder="请输入" :validators="['required']"/>
            。。。
        </ph-validator>
        <button @click="onSubmit">提交</button>
    </ph-form>
</template>
<script setup>
const formData = reactive({
    account:undefined
})
const validator = ref()
const onSubmit = ()=>{
    validator.value?.validateForm()
    .then(()=>{
        //http post(formData)
    })
    .catch(e=>{
        //验证失败
    })
}
</script>

###在线案例 在线form案例 and 在线验证器案例

PhValidator 验证器

PhValidator{
    required
    number
    numberRange
    datetimeRange
    email
    color
    url
    mobile
    length
    chinese
    regexp
}
//详细用法 https://phoeon.gitee.io/phoeon-ui-doc/#/validator