鍍金池/ 問答/HTML/ vue elementui validate

vue elementui validate

<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">&#xe628;</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')
                } 
            })
          }  

為什么當我在form表單里面把必填項都填好后,仍然不會執(zhí)行alert

回答
編輯回答
怪痞
  1. 先檢查自定義的檢查方法是不是正確;
  2. trigger參數(shù)的值最好使用'change',雖然可以顯示多個,但好像這樣的寫法會產生意想不到的結果,'change'完全可以包含blur事件
2017年4月28日 01:33
編輯回答
歆久

試了下你的代碼,是不是驗證沒有通過,我把你的驗證改成只是必填CustomMaster: [{required: true,trigger: 'change,blur'}],能有9999的彈出,沒有888888的彈出是因為你form的ref是titleForm

2017年8月14日 08:02