vue的form表单验证

最新推荐文章于 2024-05-24 16:31:36 发布

@搬砖小能手

最新推荐文章于 2024-05-24 16:31:36 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44706621/article/details/125406290

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue的form表单验证

vue自定义form表单验证

1.template模板代码

<template>
 <el-form size="mini" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="180px">
    <el-row>
      <el-col :span="9">
        <el-form-item label="表单1" prop="bus_scene">
          <el-select  style="width:100%;" size="mini" v-model="selectVal" placeholder="表单1">
            <el-option v-for="item in busSceneList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="表单2" prop="rrc_desc">
          <el-input  v-model="inputVal"  placeholder="表单2">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    </<el-form>
    </template>

2.js中代码

export default {
  name: "relation-form",
  data(){
	return {
		 dataRule: {
	        //表格规则
	        bus_scene: [
	          	{
		            required: true,
		            message:"输入错误1",
		            trigger: "blur",
	          	},
	        ],
	        rrc_desc: [
	           {
	            required: true,
	            message: "输入错误2",
	            trigger: "blur",
	          },
	        ]
	      },
	      busSceneList:[{lable:"表单1",id:"1"},{lable:"表单2",id:"2"}],
	      selectVal:"",
	      inputVal:""
		}
	},
	method:{
	//表单提交
	dataFormSubmit(){
		this.$refs["dataForm"].validate((valid)=>{
			//表单验证通过-返回 Bloean值（valid）
	
			})
		}
	}
  }