elementui是怎么做表单验证的？

最新推荐文章于 2024-08-21 14:51:53 发布
最新推荐文章于 2024-08-21 14:51:53 发布
阅读量10w+ 收藏 1
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stc_ljc/article/details/130231617
版权

文章目录

前言

在这里插入图片描述

在项目开发中，我们经常会遇到表单保存的功能，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。这篇文章主要就是带大家了解一下如何使用elementui做表单验证

elementui是怎么做表单验证？

步骤

el-form表单官网地址
根据文档说明，model为表单的数据对象，el-form通过model绑定数据。
reles为表单验证规则对象，其中字段名要与model中的字段名一一对应
el-form-item 容器，通过 label 绑定标签，prop属性设置为需要验证的字段名
表单组件通过 v-model 绑定 model 中的数据
方法：
1.在表单中加rules属性，然后在data里写校验规则。
2.内部添加规则
3.自定义函数校验

官网方法代码

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

在这里插入图片描述
我们没有按规则填入，然后做个表单提示，类似于下图
在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
在这里插入图片描述

一、 表单验证校验代码？

1.给el-form绑定一个属性值，属性值是一个对象
demo文件
2.给表单域绑定验证属性
3.rules属性添加验证规则

<template>
  <div>
    <h1>element表单验证</h1>
    <el-form :model="people" :rules="PeopleRules" label-width="100px" >
      <!-- 1.给el-form绑定一个属性值，属性值是一个对象 -->
      <!-- 3.rules属性添加验证规则 -->
      <el-form-item label="姓名" prop="name">
        <!-- 2.给表单域绑定验证属性 -->
        <!-- el-form-item表单域 prop验证name属性 -->
        <el-input v-model="people.name" ></el-input>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- el-form-item表单域 prop验证sex属性 -->
        <el-select v-model="people.sex" >
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
export default{
  data(){
    return{
      people:{
        name:'',
        sex:""
      },
      PeopleRules:{
        // 4.验证规则  
        name:[
          // 姓名验证
          {
          // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
          required:true,message:'请输入姓名',trigger:'blur'
          },
          {
          //第二条规则 min最小长度，max最大长度
          min:2, max:10,message:'姓名不能要在 2-10个字符区间',trigger:'blur'
          }
      ],
      sex:[
        // 性别验证
        // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
        {  required:true ,message:'必须选择一个性别',trigger:'blur'}
      ]
      }
    }
  }
}
</script>
<style scoped>

</style>

效果
在这里插入图片描述

二、el-button提交验证代码

在提交的之前，先验证表单，是否填写内容，符合规则，如果不符合阻止提交

1.首先给el-form绑定ref实例
2.el-from=>validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
3.resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

<template>
  <div>
    <h1>element表单验证</h1>
    <el-form ref="people" :model="people" :rules="PeopleRules" label-width="100px" >
      <!-- 1.给el-form绑定一个属性值，属性值是一个对象 -->
      <!-- rules属性添加验证规则 -->
      <el-form-item label="姓名" prop="name">
        <!-- 2.给表单域绑定验证属性 -->
        <!-- el-form-item表单域 prop验证name属性 -->
        <el-input v-model="people.name" ></el-input>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- el-form-item表单域 prop验证sex属性 -->
        <el-select v-model="people.sex" >
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- 提交做验证 -->
         <el-button type="primary" @click="createPeople">提交</el-button>
         <el-button type="primary" @click="$refs.people.resetFields()">重置</el-button>
         <!-- 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  data(){
    return{
      people:{
        name:'',
        sex:""
      },
      PeopleRules:{
        // 4.验证规则  
        name:[
          // 姓名验证
          {
          // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
          required:true,message:'请输入姓名',trigger:'blur'
          },
          {
          //第二条规则 min最小长度，max最大长度
          min:2, max:10,message:'姓名不能要在 2-10个字符区间',trigger:'change'
          }
      ],
      sex:[
        // 性别验证
        // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
        {  required:true ,message:'必须选择一个性别',trigger:'blur'}
      ]
      }
    }
  },
  methods:{
    createPeople(){
      // createPeople提交按钮事件
      this.$refs.people.validate((valid,err)=>{  
        // validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
        // Function(callback: Function(boolean, object))
        // 第一个参数valid验证成功返回true 否则false
        console.log(valid)
        if(!valid){
          //!valid 验证失败
          this.$message.error('人员信息填写有误，请检查');
          return
        }
        // 在这里写提交表单的代码(把用户填写的信息，通过axios传给服务器端)
      })
    }
  }
}
</script>
<style scoped>

</style>

valid打印
表单验证不通过
在这里插入图片描述
表单验证通过
在这里插入图片描述
提交按钮验证效果
在这里插入图片描述
重置按钮效果
重置前
在这里插入图片描述
点击重置按钮
在这里插入图片描述

2.validate方法深入了解

validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

1. 有参数

Function(callback: Function(boolean, object))

<template>
  <div>
    <h1>element表单验证</h1>
    <el-form ref="people" :model="people" :rules="PeopleRules" label-width="100px" >
      <!-- 1.给el-form绑定一个属性值，属性值是一个对象 -->
      <!-- rules属性添加验证规则 -->
      <el-form-item label="姓名" prop="name">
        <!-- 2.给表单域绑定验证属性 -->
        <!-- el-form-item表单域 prop验证name属性 -->
        <el-input v-model="people.name" ></el-input>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- el-form-item表单域 prop验证sex属性 -->
        <el-select v-model="people.sex" >
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- 提交做验证 -->
         <el-button type="primary" @click="createPeople">提交</el-button>
         <el-button type="primary" @click="$refs.people.resetFields()">重置</el-button>
         <!-- 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  data(){
    return{
      people:{
        name:'',
        sex:""
      },
      PeopleRules:{
        // 4.验证规则  
        name:[
          // 姓名验证
          {
          // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
          required:true,message:'请输入姓名',trigger:'blur'
          },
          {
          //第二条规则 min最小长度，max最大长度
          min:2, max:10,message:'姓名不能要在 2-10个字符区间',trigger:'change'
          }
      ],
      sex:[
        // 性别验证
        // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
        {  required:true ,message:'必须选择一个性别',trigger:'blur'}
      ]
      }
    }
  },
  methods:{
    createPeople(){
      // createPeople提交按钮事件
      this.$refs.people.validate((valid,err)=>{  
        // validate对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
        // Function(callback: Function(boolean, object))
        // 第一个参数valid验证成功返回true 否则false
        console.log('validate第一个参数',valid)
        console.log('validate第二个参数',err)
        if(!valid){
          //!valid 验证失败
          this.$message.error('人员信息填写有误，请检查');
          return
        }
        // 在这里写提交表单的代码(把用户填写的信息，通过axios传给服务器端)
      })
    }
  }
}
</script>
<style scoped>

</style>

在这里插入图片描述

2. 无参数

validate若不传入回调函数，则会返回一个 promise

 this.$refs.people.validate().then(()=>{
        console.log('验证成功回调')
      }).catch(
       (err)=>{
        // err错误对象
        console.log(err)
        console.log("验证失败回调")
       } 
      )

完整代码

<template>
  <div>
    <h1>element表单验证</h1>
    <el-form ref="people" :model="people" :rules="PeopleRules" label-width="100px" >
      <!-- 1.给el-form绑定一个属性值，属性值是一个对象 -->
      <!-- rules属性添加验证规则 -->
      <el-form-item label="姓名" prop="name">
        <!-- 2.给表单域绑定验证属性 -->
        <!-- el-form-item表单域 prop验证name属性 -->
        <el-input v-model="people.name" ></el-input>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- el-form-item表单域 prop验证sex属性 -->
        <el-select v-model="people.sex" >
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别"  prop="sex">
        <!-- 提交做验证 -->
         <el-button type="primary" @click="createPeople">提交</el-button>
         <el-button type="primary" @click="$refs.people.resetFields()">重置</el-button>
         <!-- 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  data(){
    return{
      people:{
        name:'',
        sex:""
      },
      PeopleRules:{
        // 4.验证规则  
        name:[
          // 姓名验证
          {
          // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
          required:true,message:'请输入姓名',trigger:'blur'
          },
          {
          //第二条规则 min最小长度，max最大长度
          min:2, max:10,message:'姓名不能要在 2-10个字符区间',trigger:'change'
          }
      ],
      sex:[
        // 性别验证
        // 第一条规则 required：true必填的 message 不符合规则提示消息 trigger触发方式
        {  required:true ,message:'必须选择一个性别',trigger:'blur'}
      ]
      }
    }
  },
  methods:{
    createPeople(){
      this.$refs.people.validate().then(()=>{
        console.log('验证成功回调')
      }).catch(
       (err)=>{
        // err错误对象
        console.log(err)
        console.log("验证失败回调")
       } 
      )
    }
  }
}
</script>
<style scoped>

</style>

效果
验证失败
在这里插入图片描述
验证成功
在这里插入图片描述

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

前端初见
关注
Element-UI中的表单验证
yhang0802的博客
07-03 1万+
Element-UI中的表单验证
elementui 嵌套表单验证_vue elementUI 表单校验（多层嵌套）//终极版
weixin_32559133的博客
01-26 2280
相信搜索这个问题的兄弟萌都会看到这个链接vue elementui表单校验但是这篇文章的校验规则编写实际上是实际上存在一些问题的，然后在我自己的验证下试图总结一哈element表单的校验到底应该怎么写基础规则表单内部项绑定校验主要靠prop和rules，porp指明地址，rules声明规则表单顶层需要绑定一个model，此后表单内部的prop路径均基于这个model往下写。表单顶层可以选择绑定一个...
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 1万+
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
vue element ui form表单，一列中两个参数并且都要验证，动态添加表单，动态验证
最新发布
qq_16463875的博客
08-21 229
但是很明显这个问题是一个验证规则有两个参数。根据element 组件验证规则是 v-model prop rules 要一致。所以就会有一个致命问题 那就是智能验证一个。在自定义验证的时候需要加上 表单动态添加的验证规则，很多人就要问了 index ,_this 是怎么来的 这里是形参 需要在验证添加、动态增加表单可以根据表单动态添加。这个在element ui form表单有例子，这里就不做赘叙。我在第一个验证里面添加上第二个验证。我感觉说的有点乱 不要着急 前面是思路 后面这里我贴上完整代码。
Element-UI 表单校验
Jana Jing的分享
07-13 3161
表单验证规则
ElementUI实现表单校验
David_house的博客
03-28 1万+
步骤 1.给表单el-form添加校验规则字段rules并动态绑定一个对象（对象可自定义，我这里定义为rules） 2.在script里面加入rules对象，并将要校验的字段写进去，格式固定 #eg：message的值可以自定义，blur表示表单失去焦点触发校验 username:[{required:true,message:'请输入用户名',trigger:'blur'}], 3.添加prop属性，在对应的el-form-item标签上我们让prop等于rules里面对应的字段值 上述三步操作表单校验
Element-ui表单验证
amber_1210的博客
07-19 1163
在element-ui的form表单板块中有个validate方法。该方法是对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。1、在表单上绑定验证规则----->:rules="rules"2、在表单项上添加验证字段名（注意：和绑定数据的字段名保持一致）3、在data数据下声明验证规则对象。4、统一验证重置表单。
实现elementUI表单的全局验证的方法步骤
01-19
使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。 验证规则 分析规则 一般验证规则，主要是是否必填，不为空，以及参数类型的验证。 ...
elementui 复杂 表单验证_vue+elementUI 复杂表单的验证、数据提交方案
weixin_33582801的博客
01-12 240
背景当我们在做后台管理系统时，经常会遇到非常复杂的表单：表单项非常多在各种表单类型下，显示不同的表单项在某些条件下，某些表单项会关闭验证每个表单项还会有其他自定义逻辑，比如输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本。。。在这种错综复杂的情况下，完成表单的验证和提交可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案方案1： 在一个vue文件...
elementui 复杂 表单验证_ElementUI多个子组件表单的校验管理实现
weixin_39688687的博客
12-20 1190
背景公司项目中所用到的前端框架是Vue.js + ElementUI，因为项目的业务场景中有很多的大表单，但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便，常常把多个表单写在一个.vue组件中，这导致单文件的代码量巨大，逻辑十分复杂。目前为了维护方便，表单的拆分就变得十分重要。现在做了以下的Demo说明我们的业务场景，父组件是App.vue，该组件中包含了P...
表单验证 ---- 在Vue2中使用ElementUI进行表单验证
weixin_68854196的博客
01-15 1593
在vue2中使用elementui表单的验证
element-ui表单校验
wyhvivi的博客
12-08 516
element-ui表单校验 --默认表单校验 && 自定义表单校验
element-ui 表单校验
a791226606的博客
08-04 285
一：最普通的验证 HTML <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="名称：" prop="name"> <el-input v-model="ruleForm.name" >&lt
element ui 表单验证
丽丽大神ing的博客
04-16 614
trigger 的类型及写法 age: [ {required: true,message: '不能为空', trigger: 'blur' }, {required: true,validator: validateAge, trigger: ['blur','change']} ]
Element UI 表单验证的几种方法
weixin_47032465的博客
06-11 1174
Element UI 是一个基于 Vue.js 的组件库，它提供了一套丰富的表单验证机制。通过这些机制，开发者可以确保用户输入的数据是有效和符合要求的。
element-ui的表单正则校验
热门推荐
weixin_66375317的博客
05-25 1万+
element-ui的表单正则校验
【element-ui】el-from的表单验证方式以及属性的使用总结
工作的日常记录和平凡的生活分享
04-12 5017
在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去
工作187：表单校验规则
歌谣的博客
12-03 687
第一种常用方式：表单上加rules｛object｝ <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visitorName"> <el-input v-model="formData.visitorName" placeholder="请输入姓名" clearable&gt
element ui form 表单验证
zbailing的博客
06-27 654
如果想配置更复杂的校验规则，可以参考如下官方案例提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端初见

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值