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

最新推荐文章于 2024-05-08 19:58:46 发布
最新推荐文章于 2024-05-08 19:58:46 发布
阅读量2.3k 收藏 21
点赞数 9
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44804622/article/details/133884699
版权
本文介绍了如何在Vue中使用ElementUI的el-form组件进行表单验证，包括姓名、年龄和性别的非空及年龄为非负数的规则，并展示了如何在提交和关闭弹窗时清空数据和表格勾选状态。
摘要由CSDN通过智能技术生成

校验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>

宋糍－
关注
element-ui表格操作大全
Wgq0731的博客
09-16 1358
通过给type=index的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从0开始）作为参数，返回值将作为索引展示。上述代码将第一列作为索引列，并且传入了一个indexMethod函数自动传入了当前行数，然后返回了当前行数*2作为下一行索引值。
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
qq_45532769的博客
10-29 4382
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
主要介绍了vue+ElementUI 关闭对话框清空验证,清除form表单的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 5万+
日常开发中输入框正则校验大全-------持续更新维护中.......
Vue el-form 表单清空 初始化
u012174809的专栏
12-21 4628
如果用手写属性值=undefined 会带来副作用影响，比如下次打开，这个属性没了，然后页面无法写入，或是选择项出现validate校验error ，这并不是我们想要的效果，推荐 使用官方已经定义好的 resetFields 它需要具备三个条件，才能成功初始化。 1.el-form 里 加上 ref='form' 2.表单项 加上 prop="name" 3.this.$refs['form'].resetFields() // 清空表单 ...
清空el-form表单数据（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-26 3340
<!-- 添加险种开始 --> <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=
elementUI弹窗关闭清空表单以及校验规则
最新发布
m0_64992765的博客
05-08 619
翻了很多文章，都是采用如下图，但都未生效，因为不在都一个表单当中,清楚校验不起作用。写个重置按钮进行隐藏，关闭弹窗时进行调用便可。配置后控制台会报错。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
01-21
然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之
vue+elementui 对话框取消 表单验证重置示例
12-30
最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 vue： <el dialog :title=titleName...
el-form清除表单信息
star的博客
03-02 1万+
当注册时输入的用户名已存在，清空之前输入的注册信息： 不清空表单的效果： 清空表单信息之后的效果： 可使用resetFields方法或者clearValidate方法 resetFields方法：可移除校验结果并重置字段值（注：清除表单项name的校验及数值） clearValidate方法：只能移除校验结果，不能重置字段值（注：只清除表单项name的校验，不清除表单项name的数值） &...
Vue中element多选表格，根据表格内数据，判断数据是否可勾选
weixin_48395990的博客
10-16 792
本项目中需求：根据表格中的‘资料有效’判断是否可选，当数据为未关账时可以勾选，已关账时不可勾选
Vue开发--Element 的Table组件判断当前是勾选状态还是取消勾选状态
weixin_41883384的博客
06-21 1万+
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select='onTableSelect' /*判断当前表格勾选的是选中的还是取消选中的 */ @selection...
el-element表单el-form使用resetFields清空进行初始化
migexiaoliang的博客
12-07 2930
el-element表单el-form使用resetFields清空进行初始化 我们一般使用带表单的弹窗时，有时候新建完成再次打开或者填写完数据不保存去关闭表单，再次打开会保留之前的填写。 想要点击取消按钮、点击关闭按钮清空数据，可以使用element的 1、el-form 里 加上 ref=‘form’；2、表单项 加上 prop=“name”；3、this.$refs[‘form’].resetFields() // 清空表单
vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中
weixin_44867717的博客
03-29 1733
【代码】vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中。
vue中获取复选框是否被选中的值、如何用JavaScript判断复选框是否被选中
qq_56715703的博客
10-18 3434
第一种方法：通过获取dom元素，getElementById、querySelector、getElementsByName、querySelectorAll（需要遍历，例如：for循环）在你做任何其他操作的时候判断checkboxIsChecked的值，如果为true表明选中了，再进行后续操作。第二种是用v-model在input复选框上绑定一个变量，通过双向绑定的特性来判断复选框是否被选中。第一种：被选中输出true，否则为false。选中输出true、未选中输出false。
vue中判断复选框是否被选中
qq_59125846的博客
05-11 1221
【代码】vue中判断复选框是否被选中。
el-form 规则校验-清空规则校验
Aa12364567的博客
03-15 821
el-form 规则校验-清空规则校验。
element ui el-table表格复选框，弹框关闭取消打勾选择
蓝胖子的博客
10-13 1464
element ui el-table表格复选框，弹框关闭取消打勾选择
vue重置el-form表单校验规则方法
07-16
要重置`el-form`表单校验规则，可以使用`resetFields`方法。以下是一个示例： ```javascript // 在Vue组件中 methods: { resetForm() { this.$refs.form.resetFields(); } } ``` 在这个示例中，假设你的`el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值