element ui 中el-form 表单必输校验

最新推荐文章于 2024-07-08 10:27:33 发布

忙碌的菠萝

最新推荐文章于 2024-07-08 10:27:33 发布

阅读量1.4k

点赞数

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

本文为博主原创文章，转载请注明出处，否则保留追究法律责任的权利。如有问题，欢迎评论指正。

本文链接：https://blog.csdn.net/qq_21271511/article/details/128051682

版权

vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

element ui 中el-form 表单必输校验

<el-form :inline="true" class="demo-form-inline" ref="form" :model="form" :rules="rules" label-width="150px">
  <el-form-item label="华夏编号" prop="hxNo">
    <el-input v-model="form.hxNo" placeholder="请输入华夏编号" />
  </el-form-item>       
  <el-form-item label="收拍日期" prop="collectDate" v-mode="showEl" v-if="showEl==true" type="hidden">
    <el-date-picker clearable
      v-model="form.collectDate"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择收拍日期">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="拍品编号" prop="auctionId" readonly='true'>
    <el-input v-model="form.auctionId" placeholder="请输入拍品编号" />
  </el-form-item>
  <el-form-item label="拍品名称" prop="auctionName">
    <el-input v-model="form.auctionName" placeholder="请输入拍品名称" />
  </el-form-item>
  <el-form-item label="数量" prop="auctionNum">
    <el-input v-model="form.auctionNum" placeholder="请输入数量" />
  </el-form-item>
  <el-form-item label="拍品描述" prop="auctionDesc">
    <el-input v-model="form.auctionDesc" placeholder="请输入拍品描述" />
  </el-form-item>
  <el-form-item label="顾问意见" prop="advice">
    <el-input v-model="form.advice" placeholder="请输入顾问意见" />
  </el-form-item>
  <el-form-item label="保留价" prop="sysReservePrice">
    <el-input v-model="form.sysReservePrice" placeholder="请输入保留价" />
  </el-form-item>
  <el-form-item label="参拍场次" prop="toAuctionNo">
    <el-date-picker clearable
      v-model="form.toAuctionNo"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择参拍场次">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="期望价" prop="customerExpectedPrice">
    <el-input v-model="form.customerExpectedPrice" placeholder="请输入期望价" />
  </el-form-item>
  <el-form-item label="评估价" prop="assessPrice">
    <el-input v-model="form.assessPrice" placeholder="请输入评估价" />
  </el-form-item>
  <el-form-item label="出品人" prop="publisher">
    <el-input v-model="form.publisher" placeholder="请输入出品人" />
  </el-form-item>
  <el-form-item label="华夏账号" prop="hxAcct">
    <el-input v-model="form.hxAcct" placeholder="请输入华夏账号" />
  </el-form-item>
  <el-form-item label="客户经理" prop="customerCharge">
    <el-input v-model="form.customerCharge" placeholder="请输入客户经理" />
  </el-form-item>
  <el-form-item label="是否送评" prop="sendReviewFlag">
    <el-input v-model="form.sendReviewFlag" placeholder="请输入是否送评" />
  </el-form-item>
  <el-form-item label="送评公司" prop="sendReviewCompany">
    <el-input v-model="form.sendReviewCompany" placeholder="请输入送评公司" />
  </el-form-item>
  <el-form-item label="评级/退回描述" prop="descp">
    <el-input v-model="form.descp" placeholder="请输入评级/退回描述" />
  </el-form-item>
  <el-form-item label="备注" prop="remark">
    <el-input v-model="form.remark" placeholder="请输入备注" />
  </el-form-item>
</el-form>

添加校验

// 表单校验
data() {
	rules: {
	  auctionId: [
	    { required: true, message: "拍品编号不能为空", trigger: "blur" }
	  ],
	  auctionName: [
	    { required: true, message: "拍品名称不能为空", trigger: "blur" }
	  ],
	  auctionNum: [
	    { required: true, message: "数量不能为空", trigger: "blur" }
	  ],
	  publisher: [
	    { required: true, message: "出品人不能为空", trigger: "blur" }
	  ],
	  hxAcct: [
	    { required: true, message: "华夏账号不能为空", trigger: "blur" }
	  ],
	},
}