vue3-form-plus

vue3 表单验证组件

1、安装 yarn add vue3-form-plus 或 npm install vue3-form-plus --save

2、样式引入

import 'vue3-form-plus/lib/style.css';

3、页面中使用

    import { ZForm, ZFormItem, ZInput  } from 'vue3-form-plus';

    const ruleForm = reactive({
        user: "",
        pass: ""
    });

    const rules = {
        user: {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
        },
        pass: [
            {
                required: true,
                message: "请输入密码",
                trigger: "blur",
            },
            {
                validator(rule, value, callback) {
                    if (value.length < 6 || value.length > 18) {
                        callback("密码长度必须大于6位小于18位");
                    } else if (value.length !== 11) {
                        setTimeout(() => {
                            callback("异步");
                        }, 1000);
                    } else {
                        callback();
                    }
                },
                trigger: "change",
            },
        ]
    };

    const formRef = ref();

    const submit = (formRef) => {
        formRef.validate((valid,err) => {
            if (valid) {
                console.log("ok");
            } else {
                console.log("error",err);
                return false;
            }
        })
    };



    const reset = (formRef) => {
        formRef.resetFields();
    };


    <z-form ref="formRef" :model="ruleForm" :rules="rules" err-position="right">
        <z-form-item label="账号" prop="user">
          <z-input
            v-model.trim="ruleForm.user"
            placeholder="手机号"
          ></z-input>
        </z-form-item>
    
        <z-form-item label="密码" prop="pass">
          <z-input
            type="password"
            v-model.trim="ruleForm.pass"
            placeholder="密码"
          ></z-input>
        </z-form-item>
   
        <p>
            <button @click="submit(formRef)">提交</button>
            <button @click="reset(formRef)">重置</button>
        </p>
    </z-form>