vue elementui 表单验证问题

1、:rules=“saveRules” 表单验证规则

2、:ref=“saveForm” 保存时验证表单

3、下拉框表单验证时:el-select中的v-model=“tempContract.tempId”,

trmpId 必须和 saveRules 中的名字一样

	  <el-select v-model="tempContract.tempId" placeholder="请选择" @change="changeElement">
	  
      tempId: [
        { required: true, trigger: ["blur",'change'], message: '请选择模板' }
      ]

4、下拉框验证

    trigger: ["blur",'change']
<el-form :model="tempContract" label-position="right" :rules="saveRules" ref="saveForm"> 
        <el-form-item label="请选择模板" prop="tempId">
          <el-select v-model="tempContract.tempId" placeholder="请选择" @change="changeElement">
            <el-option
              v-for="item in tempOptions"
              :key="item.tempId"
              :label="item.name"
              :value="item.tempId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同名称" >
          <el-input v-model="tempContract.contractName"></el-input>
        </el-form-item>
        <h2>填写模板信息
          <hr/>
        </h2>
        <el-row :gutter="20">
          <el-form-item label="签署人" prop="username">
            <el-input placeholder="签署人" v-model="tempContract.username" @change="changeConsole2(tempContract.username)"></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input placeholder="订单编号(选填)" v-model="tempContract.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="乙方手机号" v-model="tempContract.phone" ></el-input>
          </el-form-item>
          <el-col :span="12" v-for="(item,index) in need" :key="index">
            <el-form-item :label="item.label">
              <el-input :placeholder="item.value" v-model="temp[index].value" @change="changeConsole"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      

      data() {
      return {
        saveRules: {
          tempName: [
            {
              required: true, message: '请选择模板', trigger: 'blur'
            }
          ],
          username: [
            {
              required: true, message: '请输入用户名', trigger: 'blur'
            }
          ],
          phone: [
            { required: true, trigger: 'blur', validator: validPhone }
          ],
          tempId: [
            { required: true, trigger: ["blur",'change'], message: '请选择模板' }
          ]
        },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值