Vue如何使用ElementUI对表单元素进行自定义校验及踩坑

目录
  • 前言
  • 非空校验
  • 自定义校验
  • 定义自定义校验函数
  • 使用自定义校验函数
  • 总结

前言

在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。

其实ElementUI不仅提供了基本的非空校验，也对我们提供了自定义检验。

在使用的时候还是遇到了一些坑，下面简单的总结分享下

非空校验

知道自定义校验之前，需要知道基本的非空校验

如下图，ElementUI已经帮助我们创建好了一个简单的demo，我们直接拿来用即可。

这里我也是直接复制的demo，然后根据自己需求进行修改。

简单的说下相关的一些地方吧

一个表单包含着很多页面元素，根据自己的需求使用不同的组件去拼接即可：

表单的元素我们可以直接在data生成一个表单数据，把里面的属性都放在数据里面，这样可以直接把这个表单传到后台进行交互。不然一个一个传也太麻烦了

然后就是检验(rules)，这里一般做对表单元素校验的处理

除了手机号，密码，确认密码这三项，我都是只做了最基本的非空校验。

我们可以注意到，每一个表单元素都有一个红色的星号，这就是必输项的一个标识，我们主要通过这个属性控制：

required: true

比如我现在把用户名的required: true去掉

页面上的非空校验就没了，所以不论你校验写的再好，不加这个属性就等于没用。

自定义校验

我主要以两个较为经典的例子举例，一个是手机号的格式，一个是密码和确认密码的判断是否相同

关于表单的自定义校验ElementUI也给了demo，就是我的第二个例子

大家都知道，手机号都是有一定的规则的，不是只有11位数字就是这么简单的，还要以固定格式开头等。

定义自定义校验函数

针对这种格式，我们就可以使用自定义校验了，我们可以在data中定义自定义校验：

可以理解成把它理解成一个变量，有着自定义的回调函数进行自定义错误提示

可以看到首先是判断输入的手机号是否为空，如果为空给出的提示是：请输入手机号码

如果输入的手机号不为空，那么就通过正则表达式判断是否合法，如果不合法的话，同样给出对应的提示信息，这便是自定义校验，根据自己的需求定义自己的规则。

 // 校验手机号是否合法
    var checkPhone = (rule, value, callback) => {
		if (value === "") {
			callback(new Error("请输入手机号码"))
		} else if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(value)) {
			callback(new Error("手机号格式有误,请输入正确的手机号码"))
		} else {
			callback()
		}
	};

使用自定义校验函数

使用起来也很简单，在原有的表单校验基础上加上validator属性，值就是定义自定义函数的变量名

注意：使用了自定义校验函数之后，就不要在这里写message提示信息了。直接在函数里面定义错误信息即可。

  phone: [ { required: true,validator: checkPhone, trigger: 'blur' }],

两次密码是否相同这个demo直接拿着ElementUI给的demo即可。这里不再赘述

总结

通过表单自定义校验，大大提高了灵活性和可控性。个人还是比较喜欢的

到此这篇关于Vue如何使用ElementUI对表单元素进行自定义校验及踩坑的文章就介绍到这了,更多相关Vue用ElementUI对表单自定义校验内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue Element-ui表单校验规则实现

    目录 1.前言 2.规则校验的入门模式 2.1.示例代码 2.2.form项 2.3.prop项 2.4.rules项 2.5.rule项 2.6.使用规则 2.7.规则校验的核心 3.规则校验的进阶模式 3.1.嵌套对象属性名 3.2.自定义校验器validator 3.3.类型type 3.3.数据转换transform 3.4.数值范围Range 3.5.枚举值 3.6.正则Pattern 3.7.长度len 3.8.空白whitespace 3.9.i18n 4.规则校验的高级模式 4.

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • ElementUI多个子组件表单的校验管理实现

    ElementUI多个子组件表单的校验管理实现

    背景 公司项目中所用到的前端框架是Vue.js + ElementUI,因为项目的业务场景中有很多的大表单,但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好.最初的项目为了方便,常常把多个表单写在一个.vue组件中,这导致单文件的代码量巨大,逻辑十分复杂.目前为了维护方便,表单的拆分就变得十分重要. 现在做了以下的Demo说明我们的业务场景,父组件是App.vue,该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件(在实际的业务场景中,可能多达10

  • Vue系列之Element UI表单自定义校验规则

    目录 一.表单效验规则的使用 1.自定义效验规则介绍 2.绑定效验方法 3.添加效验 4.效验判断 5.清除效验规则 二.常见表单效验规则 (一)pattern验证 (二)validator.js文件中常见的验证方法 总结 一.表单效验规则的使用 1.自定义效验规则介绍 是否必填: required: true  ||   fasle 效验消息提示:message: "提示信息" 效验触发方式:trigger:"change"  ||  "blur&quo

  • jQuery对表单元素的取值和赋值操作代码

    $("#keyword")[0].value = ""; /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textval = $("#text_id").val(); /*获取单选按钮的值*/ var valradio = $("input[type=radio]:checked").va

  • JQuery对表单元素的基本操作使用总结

    select下拉列表onChange事件之JQuery实现: JQuery: $(document).ready(function () { $("#selectMenu").bind("change", function () { if ($(this).val() == "pro1") { $("#pro1").slideDown(); $("#pro2").slideUp(); } else if($

  • vue elementUI 表单校验的实现代码（多层嵌套）

    vue elementUI 表单校验的实现代码（多层嵌套）

    嵌套对象的校验 项目中使用的vue+elementUI进行开发,已经用了有一段时间了,感觉表单校验是每一个前端开发人员都避免不了的需求.在一些前端可以自行校验的情况下,先通过前端校验,校验不通过不发送请求,直到满足校验规则,再发送请求给后端,从而提升用户体验. elementUI对表单的校验有自己的方法,要求传入model的必须为一个对象.但如果数据结构比较复杂,对象里面又嵌套对象,该如何校验?本文给出多层对象嵌套的方法. example <template> <el-form :mod

  • 使用bootstrapValidator插件进行动态添加表单元素并校验

    使用bootstrapValidator插件进行动态添加表单元素并校验

    一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV

  • jQuery 处理表单元素的代码

    1.获取input类的值: $("input").val(); 2.获取textarea类的值: $("textarea").val(); 3.获取select类的值:$("select").val(); 当表单上含有多个input类(或者textarea类和select类),使用上述方法得到的将是一个数组.当然,你可以给这些控件加上ID,从而对某个特定的控件取值,例如:$("input#myID").val(). 下面将对每

  • 浅谈layui 表单元素的选中问题

    layui对表单元素都作了美化,比如下拉列表,单选框,多选框.对表单美化后相应元素的操作,其实是在layui处理过后的div上操作,不能真的反映在原始我们编写的表单的元素上.这也会出现一个问题,如果想用JS对表单做些预处理,怎么做?操作原始的元素并不会展现在layui处理过的表单中的,那我们就对layui处理过的表单动手 这里要提两个我用过的,一个是单选框,一个是下拉列表 * 单选框,layui美化后,对应的type=radio的input项隐藏,在input之后追加了一个div,里面用i标签美

  • vue elementUI 表单嵌套验证的实例代码

    一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证 <el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent> <el-form-item label="客户名称:" size="

  • Vue+Element-ui表单resetFields无法重置问题

    目录 问题背景 第一个无法解决重置表单解决方案 第二个无法解决重置表单解决方案 问题背景 在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种: 1.<Modal/ >组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]获取实例就会出现 undefined 的情况. 2.比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 raw

  • VUE实现表单元素双向绑定（总结）

    本文介绍了VUE实现表单元素双向绑定(总结) ,分享给大家,具体如下: checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inpu

随机推荐