【element-ui】vue elementui validate

Z时代
2024-01-10
分类：技术分享

<el-form class="titleForm" :inline="true" :rules="titleFormAdd" ref="titleForm" :model="titleForm" label-width="96px">
               <el-form-item label="申报地海关" prop="CustomMaster">
                  <el-input  v-model="titleForm.CustomMaster" name="CustomMaster"  auto-complete="off" :style="{width:'156px'}"></el-input>
                </el-form-item>    
                <!--<el-form-item label-width="0px" label="" prop="TypistNo">
                  <el-input v-model="titleForm.TypistNo" name="TypistNo"  type="hidden"  auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="操作员" prop="Typistname">
                  <el-input v-model="titleForm.Typistname" name="Typistname"   auto-complete="off" :style="{width:'156px'}"></el-input>
                </el-form-item>
                <!--<el-form-item label-width="0px" label="" prop="PreEntryId">
                  <el-input v-model="titleForm.PreEntryId" type="hidden"  auto-complete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="单位" prop="PreEntryName">
                  <el-input v-model="titleForm.PreEntryName" name="PreEntryName"   auto-complete="off" :style="{width:'156px'}"></el-input>
                </el-form-item>
                <el-form-item label="海关十位编码" prop="CustomsCode">
                  <el-input v-model="titleForm.CustomsCode" name="CustomsCode"  auto-complete="off" :style="{width:'156px'}"></el-input>
                </el-form-item>
            </el-form>
事件： 
<li @click="saveDocVue('titleForm','customForm')" title="按Alt+s可以保存单证">
            <i class="iconfont"></i>
            <span>保存(S)</span>
        </li>
  vue data：
    titleFormAdd: {
            CustomMaster:[
              {validator: chkCustomMaster,trigger:'change,blur'}
            ],
            Typistname:[
              {validator: chkTypistname,trigger:'change,blur'}
            ],
            PreEntryName: [
              {validator: chkPreEntryName,trigger:'change,blur'}
            ],
            CustomsCode: [
              {validator: chkCustomsCode,trigger:'change,blur'}
            ]
          }, 
    校验方法：
    function chkCustomMaster(rule, value, callback){
          if (!value) {
              callback(
                new Error()
              ) 
          }else {
             $("#promptMessage").html('')
          }    
        }
  vue method：
     saveDocVue(a,b){
          this.$refs[a].validate((valid) => {
            if (valid) {
              alert('9999')
            }
          })
           this.$refs[b].validate((valid) => {
                if(valid){
                   alert('888888')
                } 
            })          }