form表单判断 vue

每次我们写表单的时候都要判断一大推重复的代码 虽然用了循环但是弹出的提示结果也是一样的 因为是vue写的 还不能使用js的dom操作 所以今天我搞了好久终于写出了相对应的方法 代码少 且那个为空就会弹出相对应文字的弹框

css代码
<form @submit="formSumbit" class="formSumbit">
    <view class="hang">
     <text>持卡人</text>
     <input type="text" placeholder="持卡人姓名" name="user" ref="user"/>
    </view>
    <view class="hang">
     <text>卡号</text>
     <input type="text" placeholder="请输入银行卡卡号" name="cardNumber" ref="cardNumber"/>
    </view>
    <view class="hang">
     <text>类型</text>
     <input type="text" placeholder="请输入银行类型" name="cardType" ref="cardType" />
    </view>
    <view class="hang">
     <text>网点</text>
     <input type="text" placeholder="请输入您办卡所在的网点" name="openCardBank"  ref="openCardBank"/>
    </view>
    <button class="btn" hover-class="btnHover" form-type="submit">完成</button>
   </form>

这里的key要注意 看它的作用

js代码
export default {
 data() {
  return {
   key:'user'
  };
 },
 methods: {
  formSumbit(e){
   let formValue = e.detail.value;
   for(var key in formValue){
    if(formValue[key]==""){
     this.key = key;
     uni.showToast({
      icon:'none',
      title:this.$refs[key].placeholder
     });
     return ;
    }
   }
  },
  
 }
};