element-ui el-input / el-select输入框的非空校验

最新推荐文章于 2025-07-05 22:19:12 发布

原创最新推荐文章于 2025-07-05 22:19:12 发布 · 1.8w 阅读

9 ·

CC 4.0 BY-SA版权

前端 2020 专栏收录该内容

49 篇文章

订阅专栏

本文探讨了Vue.js中表单验证的实现方法，包括直接使用JS进行判断、自定义验证规则以及利用Element UI组件库的内置功能。通过具体代码示例，详细介绍了如何设置表单字段的验证规则，如手机号码格式检查，并讨论了select元素在验证过程中的常见问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、之前写的实现

直接js判断就可以

.prevent .stop 是阻止继续冒泡不一样的

见官方说明 1 https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C

2 自定义（我没看）https://juejin.im/post/5d28787e6fb9a07f06559a64

3 https://www.jb51.net/article/146419.htm 这个网址很好我的项目里面就这样写的

 next() {

      this.$refs["firmForm"].validate(valid => {

        if(!valid)

          console.log("表单填写不完整  不通过");

        else 

          this.active++;

      });

     // this.$refs['firmForm'].clearValidate();

    },

===========================================

根据链接3 的介绍写了一个判断

然后发现有一丢丢的小问题嗯一个很坑的bug

先看代码 prop那里需要和v-model 是一样的

不然获取不到。。。一直说空这边有点不清不楚的。qwq

html

<template>
 <div class="taxi-appointment-dairen">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
   <div class="dairen-input">
    <el-form-item>
     <el-input
      v-model="ruleForm.name"
      placeholder="请输入乘车人姓名（选填）">
     </el-input>
    </el-form-item>
    <i class="fa fa-user fa-2x"></i>
   </div>
   <div class="dairen-input">
    <el-form-item prop="number">
<!-- props 这里   一样 才行    qwq      -->
     <el-input
      v-model="ruleForm.number"
      placeholder="请输入乘车人手机号码">
     </el-input>
    </el-form-item>
    <i class="fa fa-mobile-phone fa-2x"></i>
   </div>
   <div class="popover-btn">
    <el-button @click="submitForm('ruleForm')" type="primary">确定</el-button>
   </div>
  </el-form>
 </div>
</template>

<script>
 export default {
  data () {
   var ruleNumber = (rule, value, callback) => {
    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (value === '') {
     callback(new Error('请输入乘车人手机号码'));
    } else if(!myreg.test(value)) {
     callback(new Error('请输入正确乘车人手机号码'));
    }else {
     callback();  //重点在这 如果在验证通过后不添加callback()函数在验证时是条件会为false
    }
   };
   return {
    ruleForm: {
     name: '',
     number: ''
    },
    rules: {
     number: [{ validator: ruleNumber, trigger: 'blur' }]
    }
   }
  },
  methods: {
   submitForm (formName) {
    this.$refs[formName].validate((valid) => {
     if (valid) {   //在验证通过时时不返回callback()时 这一步进不来
      console.log(valid)
     } else {
      return false
     }
    });
   }
  }
 }
</script>