鍍金池/ 問(wèn)答/HTML/ elementui 校驗(yàn)

elementui 校驗(yàn)

圖片描述

<el-form class="titleForm" :inline="true" :rules="titleFormAdd" ref="titleForm" :model="titleForm" label-width="96px">
               <el-form-item label="申報(bào)地海關(guān)" prop="CustomMaster">
                  <el-input v-model="titleForm.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" type="hidden"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="操作員" prop="Typistname">
                  <el-input v-model="titleForm.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"  auto-complete="off" :style="{width:'156px'}"></el-input>
                </el-form-item>
                <el-form-item label="海關(guān)十位編碼" prop="CustomsCode">
                  <el-input v-model="titleForm.CustomsCode"  auto-complete="off" :style="{width:'156px'}"></el-input>
                </el-form-item>
            </el-form>
                
rules: 
titleFormAdd: {
        CustomMaster:[
          {validator: chkCustomMaster,trigger:'blur'}
        ],
        Typistname:[
          {validator: chkTypistname,trigger:'click'}
        ]
      }
 var chkCustomMaster = (rule, value, callback) => {
            if (!value) {
              callback(
                this.errorMsg = '申報(bào)地海關(guān)是必填項(xiàng)'
              )
            }
        }
        var chkTypistname = (rule, value, callback) => {
            if (!value) {
              callback(
                this.errorMsg = '操作員是必填項(xiàng)'
              )
            }
        }

我想實(shí)現(xiàn)的需求是光標(biāo)處于第一個(gè)輸入框時(shí),當(dāng)按回車鍵時(shí),校驗(yàn)第一個(gè)輸入框,然后光標(biāo)跳轉(zhuǎn)到第二個(gè)輸入框,并提示當(dāng)前第二個(gè)輸入框的輸入規(guī)則,如果第一個(gè)輸入框輸錯(cuò)了,第一個(gè)輸入框邊框變成紅色,當(dāng)光標(biāo)再次返回第一個(gè)輸入框時(shí)對(duì)內(nèi)容進(jìn)行校驗(yàn)。 這個(gè)怎么實(shí)現(xiàn)呢?

回答
編輯回答
神曲

el-form 明明封裝的好好的校驗(yàn)規(guī)則為什么要這么做呢

<el-form class="titleForm" :inline="true" :rules="titleFormAdd" ref="titleForm" :model="titleForm" label-width="96px">
   <el-form-item label="申報(bào)地海關(guān)" prop="CustomMaster" rules=[{required=true, message='校驗(yàn)信息', trigger:'blur'}]>
      <el-input v-model="titleForm.CustomMaster"  auto-complete="off" :style="{width:'156px'}"></el-input>
    </el-form-item>    
</el-form>

這樣在失去焦點(diǎn)的時(shí)候就會(huì)檢驗(yàn)了啊,當(dāng)前字段校驗(yàn)不過(guò)的話就不應(yīng)該繼續(xù)往下走了

2017年11月14日 12:47
編輯回答
瘋浪

用戶應(yīng)該是習(xí)慣使用tab去進(jìn)入下個(gè)input吧~

2017年11月16日 12:47