表单验证 ---- 在Vue2中使用ElementUI进行表单验证

这篇具有很好参考价值的文章主要介绍了表单验证 ---- 在Vue2中使用ElementUI进行表单验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

给表单绑定对应属性

在data中定义数据对象和表单的定义规则

与数据对象双向绑定

对整个表单进行验证


前言

在做项目时,对于表单进行验证是我们必不可少的

例如

搭建一个基本的登录界面

<div class="form">
  <h1>登录</h1>
  <el-card shadow="never" class="login-card">
    <!--登录表单-->
    <el-form>
      <el-form-item>
        <el-input placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入密码" />
      </el-form-item>
      <el-form-item>
        <el-checkbox>
          用户平台使用协议
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button style="width:350px" type="primary">登录</el-button>
   </el-form-item>
</el-form>

表单嵌套一般都是

  el-form > el-form-item > el-input 

表单验证 ---- 在Vue2中使用ElementUI进行表单验证,实际应用,elementui,vue.js,前端

进行验证前,我们需要先

给表单绑定对应属性

对<el-form>标签,我们绑定三个属性

ref:该属性是为了能获取到表单组件

model:表单的数据对象

rules:表单的定义规则

 <el-form ref="form" :model="loginForm" :rules="loginRules"></el-form>

在data中定义数据对象和表单的定义规则

model数据对象loginForm:

表单验证 ---- 在Vue2中使用ElementUI进行表单验证,实际应用,elementui,vue.js,前端

rules规则对象loginRules:

表单验证 ---- 在Vue2中使用ElementUI进行表单验证,实际应用,elementui,vue.js,前端

如上代码

对于验证规则的制定中

required:true/false(是否必填)

message:提示信息

trigger:通过什么触发(一般都是blur,失去焦点时触发)

pattern:正则表达式

min:最少位数

max:最大位数

对于复选框的验证,required是无法进行验证的,required只能坚持null 和 undefine

对于复选框的验证使用

自定义校验

validator:()=>{}

回调函数三个参数

rule规则
value检查的数据 true/false(是否勾选)
callback 函数 执行这个函数

代码

data() {
    return {
      loginForm: {
        phoneNumber: '',
        password: '',
        isAgree: true

      },
      // 校验规则
      loginRules: {
        phoneNumber: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 12,
          message: '密码应在6-12位',
          trigger: 'blur'
        }],
        isAgree: [{
          validator: (rule, value, callback) => {
            value ? callback() : callback(new Error('必须要勾选用户平台协议'))
          }
        }]
      }
    }
  }

与数据对象双向绑定

 <el-form ref="form" :model="loginForm" :rules="loginRules">
      <el-form-item prop="phoneNumber">
            <el-input v-model="loginForm.phoneNumber" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item prop="password">
          <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
      </el-form-item>
      <el-form-item prop="isAgree">
          <el-checkbox v-model="loginForm.isAgree">
              用户平台使用协议
          </el-checkbox>
      </el-form-item>
      <el-form-item>
          <el-button style="width:350px" type="primary" @click="login">登录</el-button>
      </el-form-item>
</el-form>

<el-form-item></el-form-item>

表单验证,必须填写prop参数

使用v-model双向绑定data中的数据对象

对于密码框

加上

show-password

密码就不是明文

对整个表单进行验证

点击登录时,需要对整个表单进行验证

使用

validate

login() {
      this.$refs.form.validate((isOK) => {
        if (isOK) {
          alert('校验通过')
        }
      })
    }
 

表单验证 ---- 在Vue2中使用ElementUI进行表单验证,实际应用,elementui,vue.js,前端

点击登录时,调用该方法对表单进行验证

完整代码文章来源地址https://www.toymoban.com/news/detail-806945.html


<template>
<div class="form">
      <h1>登录</h1>
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <el-form ref="form" :model="loginForm" :rules="loginRules">
          <el-form-item prop="phoneNumber">
            <el-input v-model="loginForm.phoneNumber" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="请输入密码" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">
              平台用户协议
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 350px;" type="primary" @click="login">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Login',
  data() {
    return {
      isShow: false,
      loginForm: {
        phoneNumber: '',
        password: '',
        isAgree: true

      },
      // 校验规则
      loginRules: {
        phoneNumber: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 6,
          max: 12,
          message: '密码应在6-12位',
          trigger: 'blur'
        }],
        isAgree: [{
          validator: (rule, value, callback) => {
            value ? callback() : callback(new Error('必须要勾选用户平台协议'))
          }
        }]
      }
    }
  },
  methods: {
    login() {
      this.$refs.form.validate((isOk) => {
        if (isOk) {
         alert("表单验证成功")
        }
      })
    }
  }
}
</script>

到了这里,关于表单验证 ---- 在Vue2中使用ElementUI进行表单验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+elementui表单数组对象深层嵌套之自定义验证规则

    需求场景:在Vue+Elementui项目中,需要在表单的循环数组中,对某一深层嵌套的对象属性制定自定义校验规则。

    2024年02月05日
    浏览(56)
  • vue2:elementUI中Form 表单在特定情况下做动态rules添加删除

    先看需求: (不想看的直接拉到最后)  【需求说明】 6、如状态为上架时,库存为必填,下架状态时,库存为可填,前面无星号 实现方法:使用this.$set()和this.$delete() 上代码: 由于设计商业隐私,代码只上传一部分:   表单data中原来的rules: 不添加上下架状态的rules 在

    2023年04月08日
    浏览(39)
  • vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复

    ElementUI的form表单,当动态切换显示表单时报错 Error: [ElementForm]unpected width 。 翻译过来就是form表单的label宽度width出了问题。 参数 说明 类型 可选值 默认值 label-width 表单域标签的宽度,例如 ‘50px’。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。 string — — 查看这

    2024年02月21日
    浏览(39)
  • 【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面,路由式开发(附完整代码)

    目录 效果图: 一、template部分 二、style样式 三、script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们给获取验证码绑定一个方法 (2)然后封装一个axios接口,方便后面测试联调(这部分每个人封装的都不一样) (3)然

    2024年02月17日
    浏览(50)
  • 如何在Vue中进行表单验证?

    Vue是一种非常强大的JavaScript框架,可以帮助我们在前端实现数据绑定、事件监听等特性,实现类似于MVVM的数据绑定机制。表单验证是Vue应用中非常常见的需求,下面是一个简单的示例,演示如何在Vue中进行表单验证。 首先,我们要明确一点:表单验证不是为了打败机器人,

    2024年02月08日
    浏览(27)
  • elementUI表单验证之动态表单验证

    elementUI 中 Form 组件提供了表单验证的功能,只需要通过  rules  属性传入约定的验证规则,并将 Form-Item 的  prop  属性设置为需校验的字段名即可。 (1)常用表单验证 (2)自定义验证规则(:validator)  有些需要自定义的校验规则可以作为变量写在data中,然后赋值

    2024年02月11日
    浏览(50)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(57)
  • elementui表单的验证问题

    element ui 是基于vue的一个ui框架,用起来还是挺不错的,但是有时候还是会遇到一些摸不着头脑的情况。 ​ 我在打开一个新增数据的对话框的时候出现了一个问题,明明是新增,但是一打开就出现了错误提示,这肯定是不对的,用户体验也是极其不好的。到底是什么原因导致

    2024年02月07日
    浏览(39)
  • ElementUI之CUD+表单验证

    ElementUI之CUD 表单验证 1.ElementUI之CUD 2.表单验证

    2024年02月07日
    浏览(37)
  • ElementUI之增删改及表单验证

                                                             ⭐⭐ 本文章收录与ElementUI原创专栏 :ElementUI专栏                                      ⭐⭐   ElementUI的官网: ElementUI官网 目录 一.前言 二.使用ElementUI完成增删改         2.1 后台代码         2.2 前端代

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包