el-form表单用法

最新推荐文章于 2024-04-12 16:19:47 发布

m0_64468008

最新推荐文章于 2024-04-12 16:19:47 发布

阅读量318

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/m0_64468008/article/details/125741528

版权

本文介绍了使用Vue.js进行表单验证的方法，通过`:model`、`:rules`属性以及`v-model`和`prop`指令实现数据绑定和校验规则。示例代码展示了如何设置用户名和密码的必填校验，触发事件为输入失去焦点时。

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

    <el-form  :model="ruleData" :rules="rules" ref="ruleData" >
          <el-form-item prop="username">
              <el-input v-model="ruleData.username" placeholder="用户名"></el-input>
          </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="ruleData.password" placeholder="密码"> 
          </el-input>
          </el-form-item>
         
         </el-form>

：model里绑定表单数据对象，：rules绑定表单数据对象的规则，ref绑定控件$ref；

v-model绑定对象里面的数据，prop数据对象每项数据对应的规则，type文本框类型；

 data: function(){
    return {
      ruleData:{
        username: "mm",
        password: "123",
      },
      rules:{
          username:[{
            required:true,message:"请输入用户名",trigger:"blur"
          }],
          password:[{
            required:true,message:"请输入密码",trigger:"blur"
          }],

      }
    }
   },