element 封装form集成校验自定义内容

最新推荐文章于 2024-06-27 10:50:18 发布

weixin_33775582

最新推荐文章于 2024-06-27 10:50:18 发布

阅读量774

点赞数

文章标签： ui

原文链接：https://segmentfault.com/a/1190000017538125

版权

后台管理系统使用form的频率非常高，并且存在不同的校验，如果不加以封装，大量的ifelse存在，不同人可能写不同的校验规则，大大增加了维护的难度。封装一个form组件让校验规则全部交由组件处理。
封装好解决了很多需求记录并且分享下

接解了校验，让校验由组件来处理，传入相应校验规则即可。
使用render让组件可以自定义增加扩展性

对比下以下是element的例子这单单只是js部分加上html的代码量将大大增加
图片描述
封装后的代码

demo演示显示
github源码及文档说明

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33775582

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue项目中Form表单自定义校验

m0_51431448的博客

08-18

2948

在实际项目中肯定少不了的增删改查中，前端表单有时候必须校验一些规则，比如必须输入电话号码、必须是数字、必须输入真实身份证号、必须输入整数且大于0等等等等，太多了，所以这里就列一下常用的自定义校验规则。然后我们想在element-ui中的el-form表单中使用上面的规则，为了方便使用可以再建一个validator.js，这个文件就是在el-form-item上的rules自定义做校验使用的回调方法。为了方便使用，我们可以第二个js文件（validator.js）中的函数挂载在Vue的原型上，拱全局使用。.

element ui表单必填_element-ui Form表单校验小结及踩坑

weixin_39602967的博客

12-29

1881

1、要验证输入只能为数字时、方法一如果使用type=“number”样式这边去掉type=number时自带的属性/*去除webkit中input的type="number"时出现的上下图标*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type...

参与评论您还未登录，请先登录后发表或查看评论

Element表单验证的封装

张_优秀的博客

07-08

424

/** * 用于表单验证 * 使用示例 -- this.formValidation.specialCharacters * rules: { * eventName: [ * { required: true, message: '不能为空', trigger: 'blur' }, * { validator: this.formValidation.specialCharacters, message: '不能输入特殊字符', trigger: 'blur' } * ],.

element表单验证的封装

qyp_1的博客

10-09

986

前言这一篇文章是在用element中的表单的时候，会用到正则来判断表单的对错，当然正则的话得自己写，比如这样但是我们开发的时候就会发现如果两个组件都用到了这个正则那么就会产生重复性，这还只是两个，一般的话不止两个，会有很多，会产生很多的重复的正则，那么，就很烦，因为我们是要追求优雅，简介的，诶，碰到我了，那么就很简单的解决了。 1、创建一个js文件创建一个js文件，我是习惯性创建到assets中，这个没有什么规定的，然后就在里面写正则，就是按这样的来，因为我们是用的人家element的东西，所以得规规

element ui form 表单验证

最新发布

zbailing的博客

06-27

633

如果想配置更复杂的校验规则，可以参考如下官方案例提交

vue element-UI Form表单验证

weixin_30527143的博客

07-30

286

摘自官网 https://element.eleme.cn/#/zh-CN/component/form 保证prop的值等于v-model的值，并且初始化值，这样验证才好使。可以自定义验证 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ru...

Element UI中el-form表单花样校验，接口校验、遍历生成校验等应有尽有

钱多多的博客

11-24

1459

【代码】Element UI中el-form表单花样校验，接口校验、遍历生成校验等应有尽有。Form-Item里可以使用动态的rules参数来决定使用哪个校验，同样可以使用三目运算符进行判断遍历生成Form-Item时，生成的可以使用prop进行动态绑定 自定义校验的时候可以进行传参，参数存放在回调函数rule

element表单校验

qq_44950078的博客

11-04

123

1、在数据区为每一个数据分别定义校验规则 2、通过rules将校验规则注入el-form： 3、为每一个el-form-item通过prop指定校验规则 4、在表单提交的时候进行一次表单校验例：用户名密码登录页面表单校验 <template> <div> <el-form ref="form" :model="user" label-width="80px" :rules="formRules"> <el-form-item l

vue封装 element-ui form表单验证正则匹配手机号 自定义校验表格内容

weixin_55103282的博客

10-18

311

在methods:中写： //检查手机号 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return false; } else { return true; } }, 需要验证手机写的是 element框架中prop="phone"验证规则 <el-form-item label="手机号" prop="phone"&g

element Form组件封装

jianjian_5201314的博客

12-29

2112

Form 表单由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item labe...

Vue element 自定义表单验证（手机号校验）

wwyxjjz的博客

08-13

7281

element官网中没有手机号的验证？别慌，绝绝子来教你呀！手机号验证效果如下：代码如下： <el-form-item label="手机号" prop="tel"> <el-input v-model="ruleForm.tel" placeholder="请输入手机号" οninp......

element之el-form的各种校验姿态

weixin_34357962的博客

12-15

3710

1.基础姿势/自定义姿势 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-inp...

(ElementPlus)操作(不使用 ts): Form表单检验、规则及案例分析(这一篇就够了)

狮子座的男孩

08-19

6369

FormJavaScript在数据被送往服务器前对HTML中的Form 表单中的这些输入数据进行验证的行为就称为表单检验;

Vue前端框架实现ElementUI的Form表单验证方式

qq_62175972的博客

09-05

1081

首先，需要对form表单完成如下定义：然后，对表单的项指定一个prop属性名，并将其绑定到model中： 2.2 用户名检验（一般检验）通过制定rules规则检验输入数据的合法性：效果如下：同样，先制定rules规则检验：然后实现入侵检验方法checkPhone： 2.4 form表单数据非法检验 2.5 完整表单代码如果本文对您有帮助的话，麻烦充电支持一下小编，谢谢♥~

【element-ui】el-from的表单验证方式以及属性的使用总结

工作的日常记录和平凡的生活分享

04-12

4791

在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去

elememt form表单二次封装，elform封装，很全很详细

热门推荐

一只程序猿

05-06

1万+

详解：element的form表单二次封装也很简单，写一个form表单你会发现不一样的地方只是form-item里面的组件类型而已。所以把form-item里面的内容可变化就行了。父级也只需通过一个数组（form-item里面组件类型数组），一个对象（form表单数据对象）控制就行了！为什么要多一个对象，是为了方便数据提交，以及数据验证。这次封装多加了el-col，也没有直接放进弹出框，是为了更加灵活可变！ 1、form表单代码（子组件） <template> <el-form :

一文教你如何用Vue+Element轻松搞定表单封装！

CRMEB小程序商城的博客

01-11

1041

【代码】一文教你如何用Vue+Element轻松搞定表单封装！

form表单的三种封装方法（Vue+ElementUI）

WY_ALA的博客

10-16

3079

这里的要点主要有：监听表单组件的数据变化：每个表单组件都有一个name标识它的业务含义，绑定的数据也是formData[field.name]，@input事件传递updateForm，在updateForm里面更新this.formData[name]，保证了this.formData里面的数据是和表单组件选择/填写的内容一致。重置时改变表单组件的数据：因为组件内部会监听父元素的value，所以这里只要清空this.formData的值，组件内部的数据也会跟着清空。

基于element-ui封装一个完整的form表单，其中包括时间，select，input，checkbox,upload上传且支持表单校验，自定义校验

06-10

好的，我可以为您提供一份基于element-ui封装的完整form表单代码，包括时间、select、input、checkbox、upload上传，并支持表单校验和自定义校验。代码如下： ```html <template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px" style="max-width: 600px;"> <el-form-item label="时间"> <el-date-picker v-model="formData.time" type="datetime" placeholder="请选择时间"></el-date-picker> </el-form-item> <el-form-item label="选择"> <el-select v-model="formData.select" placeholder="请选择"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="选项3" value="option3"></el-option> </el-select> </el-form-item> <el-form-item label="输入"> <el-input v-model="formData.input" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="多选框"> <el-checkbox-group v-model="formData.checkbox"> <el-checkbox label="选项1"></el-checkbox> <el-checkbox label="选项2"></el-checkbox> <el-checkbox label="选项3"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="上传"> <el-upload class="upload-demo" action="/upload" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" :file-list="fileList" :limit="3" :on-exceed="handleExceed" :show-file-list="false"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </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> </template> <script> export default { data() { return { formData: { time: '', select: '', input: '', checkbox: [], fileList: [] }, formRules: { time: [{ required: true, message: '请选择时间', trigger: 'change' }], select: [{ required: true, message: '请选择', trigger: 'change' }], input: [{ required: true, message: '请输入', trigger: 'blur' }] } }; }, methods: { // 上传相关方法 handleSuccess(response, file, fileList) { console.log(response, file, fileList); }, handleError(error, file, fileList) { console.log(error, file, fileList); }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, // 表单相关方法 submitForm() { this.$refs.form.validate((valid) => { if (valid) { this.$message.success('提交成功'); } else { this.$message.error('表单校验失败，请检查表单信息'); return false; } }); }, resetForm() { this.$refs.form.resetFields(); } } }; </script> ``` 以上代码使用了element-ui提供的组件，其中包括el-date-picker、el-select、el-input、el-checkbox-group、el-upload等组件，同时也支持表单校验和自定义校验。表单数据通过formData来绑定，表单校验规则通过formRules来绑定。表单提交时调用submitForm方法，表单重置时调用resetForm方法。期望这份代码能够对您有所帮助。