自己写一个表单组件，支持表单验证

最新推荐文章于 2022-11-02 00:20:40 发布

「已注销」

最新推荐文章于 2022-11-02 00:20:40 发布

阅读量354

点赞数

文章标签： vue vue.js 组件化

本文链接：https://blog.csdn.net/EllynX/article/details/112560354

版权

本文介绍了如何避免使用大型UI库，如Element-UI，而是自定义编写my-input和my-form组件来实现表单验证和提交功能。在实现过程中，详细说明了组件的使用方法，包括引入组件、定义表单数据和验证规则，以及在methods中添加验证和提交的逻辑。同时提到了my-form组件的validate方法和my-input组件的设计，包括内置的清空输入功能以及样式自定义需求。

摘要由CSDN通过智能技术生成

不想用element-ui！不想因为一个小功能就引入一个大插件！而且还得改样式！

1. 使用方式：

1）

<my-form ref="loginForm">
    <my-input
        v-model="form.username"
        placeholder="请输入用户名"
        :rules="formRule.username"
    >
        <template v-slot:icon>
            <!--图标插槽 这里要在css里给icon1整上background-image和宽高-->
            <div class="icon1"></div>
        </template>
    </my-input>

    <my-input
        v-model="form.password"
        placeholder="请输入密码"
        type="password"
        :rules="formRule.password"
    >
        <template v-slot:icon>
            <!--图标插槽 这里要在css里给ic