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

2020-10-29   阅读:1946   类型:前端   分类:Vue    标签: Vue

什么是表单验证?

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

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

image.png

步骤说明:共三个步骤。


第一步,为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>


腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/489.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×