表单验证

最新推荐文章于 2023-06-01 20:19:17 发布

Mr_zrh

最新推荐文章于 2023-06-01 20:19:17 发布

阅读量424

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Mr_zrh/article/details/116894133

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<template>
  <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="rules"   ref="form" > 
        <el-form-item label="审批人" prop="user"> 
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {


  data() {
        //手动校验的方法 当前校验规则 当前值 
     const  userValidator = (rule,value,callback) =>{
       if (value.length > 3){
          callback
       }else{
         callback(new Error("用户长度必须大于3"))
       }
     }
    return {
       formInline: {
          user: '',
          region: '',
          
        },
        rules:{
          user:[
             // 必填项          表单改变时发生   错误提示
            {  required: true, trigger:"change",message:"用户名必须录入", },
            // 手动校验      声名的一个方法上面const    条件
            { validator:userValidator, trigger: 'change'}   
           
          ]
        }
    };
  },
  mounted() {
    
  },
  methods: {
    // 表单提交的时候也做验证
     onSubmit() {
        console.log(this.formInline);
          // 通过ref操作提交表单的时候也做校验，validate是做校验的
          this.$refs.form.validate((isValid,errors) =>{ //传的两个参数 第一个为告诉你校验的结果为true，还false
            console.log(isValid,errors) 
          })
      }
  },
};
</script>

<style  scoped>

</style>