Vue使用elementUI如何实现表单数据验证

2020-10-29 阅读：1666 分类：前端标签： Vue

什么是表单验证？

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

步骤说明：共三个步骤。

第一步，为el-form通过属性绑定:rules=””，绑定一个校验规则对象，
第二步，在校验规则对象之中定义几个校验规则的属性，
第三步，在我们的表单对象中通过prop指定不同校验对象

详细代码

<template>
  <div>
      <div>
          <!-- 头像区域 -->
          <div>
              <img src="../assets/logo.png" alt="">
          </div>
          <!-- 登录表单区域 -->
          <el-form label-width="0px" :model="loginForm" :rules="loginFormRules">
              <!-- 用户名 -->
            <el-form-item label="" prop="username">
                <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="loginForm.username"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="" prop="password">
                <el-input prefix-icon="el-icon-s-goods" type="password" placeholder="请输入密码" v-model="loginForm.password"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
               <el-button type="primary">登录</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            // 表单验证规则对象
            loginFormRules:{
                //验证用户名是否合法
                username:[
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                // 验证密码是否合法
                password:[
                     { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
}
 
</script>