关于element-ui中el-form自定义验证(调用后端接口)

 更新时间:2022年07月31日 08:56:36   作者:HoShining  
这篇文章主要介绍了关于element-ui中el-form自定义验证(调用后端接口),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element-ui中el-form自定义验证

需求

在输入项目名称后,调用后端接口isNameOnly,若已存在,则效果如下图:

1.先设置校验规则rules

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" 
class="demo-ruleForm">

2.在return中定义

// 判定规则
                rules: {
                    taskName: [{
                            required: true,
                            message: '请输入项目名称',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            max: 15,
                            message: '长度在 3 到 15 个字符',
                            trigger: 'blur'
                        },
                        {
                            required: true,
                            trigger: 'blur',
                            //validatePass --- 我们自定义的校验规则
                            validator: validatePass  
                        }
                    ],
                },

3.在data中添加如下代码:(注意,以下代码和return同级)

const validatePass = (rule, value, callback) => {
                this.$depot.get({
                    url: '/isNameOnly',
                    config: {
                        params: {
                            taskName: 1,
                            userId: 1)
                        }
                    },
                    cb: (res) => {
                        this.nameOK = res.data == 1 ? true : false	
                    }
                })
                if (this.nameOK != false) {
                    callback()
                } else {
                    callback(new Error('经验证,该项目已存在于数据库中'))
                }
            }

4.method定义提交表单方法

// 提交表单数据
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$message({
                            message: '恭喜你!项目创建成功!',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '请按照提示正确输入信息后再创建!',
                            center: true
                        });
                    }
                });
            },

element-ui自定义form表单校验规则

HTML:

<el-form
    ref="form"
    label-width="120px"
    :rules="rules"
    :model="ruleForm"
        >
 <el-form-item
     label="身份证号"
     size="mini"
     class="part"
     prop="id_card"
   >
     <el-input
       v-model="ruleForm.id_card"
     ></el-input>
 </el-form-item>
 </el-form>

注意

使用校验规则的表单,在data中定义的时候必须要放在一个对象中,:model="ruleForm"这行代码一定要写,不写不生效!

js:

export default {
  name: "",
  data() {
  //自定义校验规则
    var checkIdCard = (rule, value, cb) => {
      const regIdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
     
      if (regIdCard.test(value)) {
        return cb();
      }
      cb(new Error("您输入的身份证号码不是有效格式"));
    };
    return {
      ruleForm: {
        id_card: "", //身份证
      },
      rules: {
        id_card: [
          { required: true, message: "请输入身份证", trigger: "blur" },
          { validator: checkIdCard, trigger: "blur" },
        ],
      }
    },

element ui 官网也有详细介绍哦------https://element.eleme.cn/#/zh-CN/component/form

这样也就实现了自定义校验的规则,可以在项目中使用了!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue2.6.10+vite2开启template模板动态编译的过程

    vue2.6.10+vite2开启template模板动态编译的过程

    这篇文章主要介绍了vue2.6.10+vite2开启template模板动态编译,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • vue组件学习教程

    vue组件学习教程

    这篇文章主要为大家详细介绍了vue组件学习教程,根据Vue官方文档学习的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • vue 遮罩层阻止默认滚动事件操作

    vue 遮罩层阻止默认滚动事件操作

    这篇文章主要介绍了vue 遮罩层阻止默认滚动事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue3项目搭建的详细过程记录

    Vue3项目搭建的详细过程记录

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
    2022-10-10
  • vue实现的上拉加载更多数据/分页功能示例

    vue实现的上拉加载更多数据/分页功能示例

    这篇文章主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Vue3组件间传值避坑方法指南

    Vue3组件间传值避坑方法指南

    这篇文章主要为大家介绍了Vue3组件间传值避坑方法指南,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue项目接口访问地址设置方式

    vue项目接口访问地址设置方式

    这篇文章主要介绍了vue项目接口访问地址设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue ElementUi同时校验多个表单(巧用new promise)

    Vue ElementUi同时校验多个表单(巧用new promise)

    这篇文章主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能,实现的方法有很多种,本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下
    2018-06-06
  • vue实现带过渡效果的下拉菜单功能

    vue实现带过渡效果的下拉菜单功能

    这篇文章主要为大家详细介绍了vue仿写带过渡效果的下拉菜单功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • VUE实时监听元素距离顶部高度的操作

    VUE实时监听元素距离顶部高度的操作

    这篇文章主要介绍了VUE实时监听元素距离顶部高度的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论