【vue+elementUI】校验el-form输入的内容是否符合规则+关闭页面清空el-form+关闭弹窗时清空表格所有勾选项+动态显示勾选条数

最新推荐文章于 2024-03-26 12:28:52 发布
最新推荐文章于 2024-03-26 12:28:52 发布
阅读量2k 收藏 18
点赞数 8
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44804622/article/details/133884699
版权

校验el-form输入的内容是否符合规则

需求：

       校验el-form输入的内容是否符合规则

实现过程：

        1.创建表单。包括两个input输入框和一个select下拉框。

<el-form
        :inline="true"
        :model="searchList"
        ref="search"
        :label-position="labelPosition"
        label-width="70px"
        :rules="rules"
      >
        <el-form-item label="姓名" prop="name" label-width="70px">
          <el-input v-model="searchList.name" :clearable="true" style="width:150px"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age" label-width="70px">
          <el-input v-model.number="searchList.age" :clearable="true" style="width:150px"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender" label-width="70px">
			<!-- filterable 是否可搜索
				 clearable  是否可清空
				 default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用-->
          <el-select
            v-model="searchList.gender"
            filterable
            clearable
			default-first-option
            placeholder="请选择性别"
			style="width:150px"
          >
            <el-option
              v-for="item in genderList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

        使用的el-form各属性含义如下：

        inline 属性可以让表单域变为行内的表单域

        model 表单域model字段，在使用 validate、resetFields 方法的情况下，该属性是必填的

        label-position 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width

        label-width 标签宽度

        rules 表单验证规则

       

 2.定义验证规则。姓名和性别不能为空。年龄不能为非负数值。

<script>
export default {
  data() {
    return {
      searchList: {
        name: "",
        age: "",
        gender: ""
      }, // 传入Form组件的model中的字段
      genderList: [
        { id: 1, value: "女" },
        { id: 2, value: "男" }
      ],
      rules: {
        // el-form验证规则
        name: [{ required: true, message: "姓名不能为空" }],
        age: [
          { type: "number", message: "年龄必须为数字值" },
          {
            //验证为非负数
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error("年龄不能为负数"));
              } else {
                callback();
              }
            }
          }
        ],
        gender: [{ required: true, message: "性别不能为空" }]
      }
    };
  },

};
</script>

        3.页面添加一个保存按钮，绑定save()方法对验证的数据进行处理。如果符合验证规则，关闭界面。如果不符合验证规则，进行提示。

<el-button @click="save()">确定</el-button>

save(){
		// 验证el-form是否符合验证规则
		this.$refs.search.validate(vaild=>{
			if(vaild){
				this.isShow = false;
			} else {
				this.$message.error({showClose: true,message: '请按规范填写数据', type: 'error'})
				return
			}
		})
	},

效果：

        输入的内容不符合规则时，展示效果如下

        点击确定弹出的提示框展示效果如下

实现关闭页面清空el-form所有搜索项

需求：

        实现关闭页面清空el-form所有搜索项

实现过程：

        给想要清空搜索项的el-form绑定一个ref，然后使用this.$refs.XXX.resetFields()即可。

this.$refs.search.resetFields()

        resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。

关闭弹窗时清空表格所有勾选项

需求：

       关闭弹窗时清空表格所有勾选项

实现过程：

        1.创建表格

 <el-table :data="tableList" ref="table" @selection-change="orderSelectionChange">
        <el-table-column align="center" type="selection" width="60px"></el-table-column>
        <el-table-column align="center" type="index" label="序号" width="60px"></el-table-column>
        <el-table-column align="center" prop="tableName" label="姓名" min-width="80"></el-table-column>
        <el-table-column align="center" prop="tableAge" label="年龄" min-width="80"></el-table-column>
      </el-table>


 tableList: [
        { tableName: "李四", tableAge: "18" },
        { tableName: "张三", tableAge: "20" }
      ] // 弹窗内列表数据

        2.关闭时添加取消所有勾选项

 this.$refs.table.clearSelection(); //取消所有勾选项

动态显示勾选条数

需求：

       动态显示勾选条数

实现过程：

        1.创建一个div，el-table使用@selection-change


<div style="background:rgba(98, 194, 208,0.5);padding:10px 0px;">勾选条数：{{selectedList.length}}条</div>
 <el-table :data="tableList" ref="table" @selection-change="orderSelectionChange">
        <el-table-column align="center" type="selection" width="60px"></el-table-column>
        <el-table-column align="center" type="index" label="序号" width="60px"></el-table-column>
        <el-table-column align="center" prop="tableName" label="姓名" min-width="80"></el-table-column>
        <el-table-column align="center" prop="tableAge" label="年龄" min-width="80"></el-table-column>
      </el-table>

        2.orderSelectionChange方法内容如下

// 统计勾选个数
    orderSelectionChange(selection) {
      // 更新勾选状态
      this.tableList.forEach(val => {
        val.checked = selection.includes(val);
      });
      // 统计勾选的行数
      this.selectedList = this.tableList.filter(val => val.checked);
    },

效果：

完整代码如下：

<template>
  <div class="el_form">
    <h1 class="info_title"></h1>
    <el-button type="primary" @click="showDialog()">点击此按钮打开弹窗</el-button>

    <!--title:标题
        visible：是否显示弹窗
        width：弹窗页面宽度
    before-close:关闭前的回调， 	function(done)，done 用于关闭 Dialog-->
    <el-dialog :title="title" :visible.sync="isShow" width="60%" :before-close="close">
      <!-- inline 属性可以让表单域变为行内的表单域
            model 表单域model字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 
            label-position 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
            label-width 标签宽度
      rules 表单验证规则-->
      <el-form
        :inline="true"
        :model="searchList"
        ref="search"
        :label-position="labelPosition"
        label-width="70px"
        :rules="rules"
      >
        <el-form-item label="姓名" prop="name" label-width="70px">
          <el-input v-model="searchList.name" :clearable="true" style="width:150px"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age" label-width="70px">
          <el-input v-model.number="searchList.age" :clearable="true" style="width:150px"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender" label-width="70px">
          <!-- filterable 是否可搜索
				 clearable  是否可清空
          default-first-option 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用-->
          <el-select
            v-model="searchList.gender"
            filterable
            clearable
            default-first-option
            placeholder="请选择性别"
            style="width:150px"
          >
            <el-option
              v-for="item in genderList"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div style="background:rgba(98, 194, 208,0.5);margin:10px 0px;">勾选条数：{{selectedList.length}}条</div>
      <el-table :data="tableList" ref="table" @selection-change="orderSelectionChange">
        <el-table-column align="center" type="selection" width="60px"></el-table-column>
        <el-table-column align="center" type="index" label="序号" width="60px"></el-table-column>
        <el-table-column align="center" prop="tableName" label="姓名" min-width="80"></el-table-column>
        <el-table-column align="center" prop="tableAge" label="年龄" min-width="80"></el-table-column>
      </el-table>

      <el-button @click="save()">确定</el-button>
      <el-button @click="close()" type="primary">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false, // 弹窗是否显示
      title: "", // 弹窗标题
      labelPosition: "right", // form表单的标签的对齐方式
      searchList: {
        name: "",
        age: "",
        gender: ""
      }, // 传入Form组件的model中的字段
      genderList: [
        { id: 1, value: "女" },
        { id: 2, value: "男" }
      ],
      rules: {
        // el-form验证规则
        name: [{ required: true, message: "姓名不能为空" }],
        age: [
          { type: "number", message: "年龄必须为数字值" },
          {
            //验证为非负数
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error("年龄不能为负数"));
              } else {
                callback();
              }
            }
          }
        ],
        gender: [{ required: true, message: "性别不能为空" }]
      },
      tableList: [
        { tableName: "李四", tableAge: "18" },
        { tableName: "张三", tableAge: "20" }
      ], // 弹窗内列表数据
      selectedList: [] // 弹窗内列表勾选的数据
    };
  },
  methods: {
    // 打开弹窗
    showDialog() {
      this.isShow = true;
      this.title = "标题";
    },
    // 统计勾选个数
    orderSelectionChange(selection) {
      // 更新勾选状态
      this.tableList.forEach(val => {
        val.checked = selection.includes(val);
      });
      // 统计勾选的行数
      this.selectedList = this.tableList.filter(val => val.checked);
    },
    // 保存
    save() {
      // 验证el-form是否符合验证规则
      this.$refs.search.validate(vaild => {
        if (vaild) {
          this.$refs.search.resetFields(); // 清空所有搜索框的数据
          this.isShow = false;
        } else {
          this.$message.error({
            showClose: true,
            message: "请按规范填写数据",
            type: "error"
          });
          return;
        }
      });
    },
    // 关闭弹窗
    close() {
      //显示确定关闭的弹窗
      this.$confirm("确认关闭？")
        .then(_ => {
          this.isShow = false;
          this.$refs.search.resetFields(); // 清空所有搜索框的数据
          this.$refs.table.clearSelection(); //取消所有勾选项
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.info_title {
  text-align: center;
  margin: 20px 0px;
}
</style>

宋糍－
关注
  • 8
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue el-form 表单清空 初始化
u012174809的专栏
12-21 4487
如果用手写属性值=undefined 会带来副作用影响，比如下次打开，这个属性没了，然后页面无法写入，或是选择项出现validate校验error ，这并不是我们想要的效果，推荐 使用官方已经定义好的 resetFields 它需要具备三个条件，才能成功初始化。 1.el-form 里 加上 ref='form' 2.表单项 加上 prop="name" 3.this.$refs['form'].resetFields() // 清空表单 ...
el-form表单怎么一次验证两个el-form-item
最新发布
migexiaoliang的博客
03-26 328
在项目中有【设置密码】以及【确认密码】输入，希望在两者一致的时候，两个框的错误提示都消失。
el-form清除表单信息
star的博客
03-02 1万+
当注册时输入的用户名已存在，清空之前输入的注册信息： 不清空表单的效果： 清空表单信息之后的效果： 可使用resetFields方法或者clearValidate方法 resetFields方法：可移除校验结果并重置字段值（注：清除表单项name的校验及数值） clearValidate方法：只能移除校验结果，不能重置字段值（注：只清除表单项name的校验，不清除表单项name的数值） &...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
取消或关闭dialog时清空el-form数据
m0_61345222的博客
03-27 6588
1.添加关闭和取消的点击事件 // 关闭 <el-dialog title="添加:" :close-on-click-modal="false" :visible.sync="dialogFormVisible" @close="resetForm('form')"> // 取消 <el-button @click="cancel()">取 消</el-button> 2.添加方法 // 点击关闭时清空for
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
el-form组件如何清除校验提示（前端技能提升）
2201_75705263的博客
10-26 2697
el-form组件如何清除校验提示
el-form表单如何清除校验提示语
qq_42453751的博客
08-25 5352
el-form表单如何清除校验提示语 实现的表单如下： 步骤1.当未选择持卡人时，点击确认按钮，提示校验规则 步骤2.当选择关闭表单的时候，不会提示 步骤3.再次点进表单的时候（此时持卡人栏没有任何数据），校验规则不出现 问题：再次点击表单进入时，出现了校验规则 解决办法： 重点代码 :model=“fingerFrom” <el-form ref="fingerFrom" :model="fingerFrom" label-width="120px" class="di
清空el-form表单数据（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-26 3222
<!-- 添加险种开始 --> <el-dialog destroy-on-close title="添加业务事项" :visible.sync="mattersShow" class="add-video-dialog mattersBox" width="45%"> <el-form :model="mattersForm" ref="mattersForm" label-width="8vw"> <el-form-item label=
el-form 清除表单验证结果
热门推荐
Julia_0502的博客
04-19 1万+
el-form 清除表单验证结果 总是遇到的一个表单验证问题，怕下次忘了，在这里记录一下 问题 编辑页面时总是在刚进入页面显示触发表单验证结果，由于此时并未提交，影响用户体验感 效果图如下： 代码实现： <template> <el-form ref="dateForm" :`rules`="`rules`" :model="workorderDeta
Vue + elementUI 表格输入框只允许输入固定位整数或固定位小数
qq_43850262的博客
10-08 909
前期思路： 使用watch 进行侦听，当数据改变时做相应的处理。但是在表格中，行的数量可能是不确定的，且很难用 watch 去进行侦听某一个属性，所以放弃使用watch。 解决办法： 1. 在 data 中用一个变量保存符合标准的旧值； 2. 在输入框的 input 事件处理函数中对值进行处理，若符合标准，则给 data 中的变量赋值，否则则将 data 中的变量的值赋给输入框； 3. 输入框失焦时清除 data 中保存的旧值。 代码： <el-table> ...
vue elementui table组件点击每行可输入修改对应内容做提交 （完整版）
weixin_53291256的博客
02-07 2295
vue elementui table组件点击每行可输入修改对应内容做提交（完整版）
如何在element-ui的table实现输入
AlgorithmHero的博客
08-21 1179
首先，确保你已经引入了 Element UI 的库和样式文件。来双向绑定输入框的值。这样，每一行的输入框都可以独立地与对应行的数据进行交互。来自定义 "Input Column" 这一列的内容。对象提供了对当前行数据的访问，我们使用。在上面的代码中，我们使用了。
elementui中的table组件单元格可以输入
yu_0119的博客
01-30 3422
其实利用插槽可以解决 点击编辑的时候 elementui组件中的 table里单元格可以输入 并且获取一行的数据 <el-table :header-cell-style="{ 'text-align': 'center', background: '#FAFAFA', 'font-weight': '400', }" :cell-style="{
vue项目 关闭编辑打开新增弹窗中的表单验证清除问题
weixin_69506221的博客
02-15 1713
如果新增和编辑是同一个组件，那么在关闭编辑弹窗并打开新增弹窗时，需要对表单的数据进行重置，同时还需要清除表单验证错误信息。这样，当关闭编辑弹窗并打开新增弹窗时，表单的数据和验证信息就会被重置，从而避免了上述问题。
el-element表单el-form使用resetFields清空进行初始化
migexiaoliang的博客
12-07 2493
el-element表单el-form使用resetFields清空进行初始化 我们一般使用带表单的弹窗时，有时候新建完成再次打开或者填写完数据不保存去关闭表单，再次打开会保留之前的填写。 想要点击取消按钮、点击关闭按钮清空数据，可以使用element的 1、el-form 里 加上 ref=‘form’；2、表单项 加上 prop=“name”；3、this.$refs[‘form’].resetFields() // 清空表单
vue+elementui的el-form+axios的api接口怎么配合使用
04-21
可以先在el-form的submit方法中使用axios发送请求，具体的方法如下： 在template中： ``` <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> ``` 在script中： ``` import axios from 'axios'; export default { data() { return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { axios.post('/api/login', this.form).then(response => { if (response.data.code === 200) { // 登录成功，跳转到首页 this.$router.push('/home'); } else { this.$message.error('登录失败'); } }); } else { return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; ``` 在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。 至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值