如何实现输入框失去焦点后校验规则?

图片描述

<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"  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="海关十位编码" 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 = '申报地海关是必填项'
              )
            }
        }
        var chkTypistname = (rule, value, callback) => {
            if (!value) {
              callback(
                this.errorMsg = '操作员是必填项'
              )
            }
        }

我想实现的需求是光标处于第一个输入框时,当按回车键时,校验第一个输入框,然后光标跳转到第二个输入框,并提示当前第二个输入框的输入规则,如果第一个输入框输错了,第一个输入框边框变成红色,当光标再次返回第一个输入框时对内容进行校验。 这个怎么实现呢?

阅读 5k
2 个回答

用户应该是习惯使用tab去进入下个input吧~

el-form 明明封装的好好的校验规则为什么要这么做呢

<el-form class="titleForm" :inline="true" :rules="titleFormAdd" ref="titleForm" :model="titleForm" label-width="96px">
   <el-form-item label="申报地海关" prop="CustomMaster" rules=[{required=true, message='校验信息', trigger:'blur'}]>
      <el-input v-model="titleForm.CustomMaster"  auto-complete="off" :style="{width:'156px'}"></el-input>
    </el-form-item>    
</el-form>

这样在失去焦点的时候就会检验了啊,当前字段校验不过的话就不应该继续往下走了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题