ElementUi的表单校验梳理

最新推荐文章于 2024-09-28 13:59:02 发布

鲜橙多了没

最新推荐文章于 2024-09-28 13:59:02 发布

阅读量675

点赞数 2

分类专栏： Element-ui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/GZZ__z/article/details/122009074

版权

本文详细介绍了ElementUi中进行表单校验的步骤和方法，包括设置表单的model、rules规则，以及如何通过el-form-item和el-input实现数据绑定。同时，讲解了基本的校验规则，并展示了如何自定义校验规则，使用validator函数进行验证。最后，提到了在用户未触发自动校验时，如何通过手动调用validate方法进行表单验证。

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

1. 表单校验的先决条件：

el-form : 绑定model属性（表单数据对象）

rules规则（校验）

el-form-item:设置prop属性（要校验的字段）

el-input: v-model 绑定属性（双向绑定字段）

代码：

   <!-- 卡片 -->
    <el-card class="card-longin">
       <!-- 表单 -->
       <el-form style=" margin-top: 40px;" :model="longinForm" :rules="rulesForm">
         <!-- 表单项 -->
         <el-form-item prop="mobile">
           <!-- 输入框 -->
           <el-input v-model="longinForm.mobile"  placeholder='请输入手机号'>      
           </el-input>
         </el-form-item>
           <!-- 表单项 -->
         <el-form-item prop="password">
           <!-- 输入框 -->
           <el-in