vue form check 表单验证的实现代码

this.$alert(`${obj.alias}的类型定义错误`, '提示');
break;
case 'required':
this.$alert(`${obj.alias}是必填项`, '提示');
break;
case 'rule':
this.$alert(`${obj.alias}的输入不符合规范`, '提示');
break;
default:
break;
}
}
}
});

补充：vue-form表单验证是否为空值

重点部分：

点击表单的 submit按钮 触发form 部分 @submit=”submit”事件：

submit事件 定义在js部分：

prevent：文档上说了在事件后面加上 .prevent就可以阻止默认事件了。

form @submit.prevent=”submit”
 <form @submit.prevent="submit">
    <input type="text" v-model="userName" placeholder="请输入你的姓名" class="name-style" maxlength="20"/>
    <div class="sex">
      <select v-model="selectedSex">
        <option>boy</option>
        <option selected = "selected">girl</option>
      </select>
    </div>
      <input type="text" v-model="phoneNumber" placeholder="请输入你的手机号" class="phone-number-style"/>
    <div class="guide-style">
      <select v-model="selectedGuild">
        <option selected="selected" value="">请选择一个导购： </option>
        <option v-for="guild in guilds" value ="{{ guild.name }}">{{ guild.name }}</option>
      </select>
    </div>
    <input type="submit" value ="注册" class="register-style"/>
  </form> 
  data () {
    return {
    userName: '',  //请输入你的姓名
    selectedSex: '',//选择性别
    phoneNumber: '',//请输入你的手机号
    guilds: [],
    selectedGuild: '' ///请选择一个导购
    }
  },
  methods: {
 //1.重点是这个方法 submit () {} - form @submit.prevent="submit" -重点是这个方法 submit () {},
 //2.可以在这里向服务器发送数据
   submit () {
    if (!this.userName) {
      showToast('请输入姓名!')
      return false
    }
    if (!this.phoneNumber) {
      showToast('请输入手机号码!')
      return false
    }
    if (!checkTel(this.phoneNumber)) {
      showToast('手机号格式不正确')
      return false
    }
    if (!this.selectedGuild) {
      showToast('请选择导购!')
      return false
    }
    return true
    }
  }

总结

以上所述是小编给大家介绍的vue form check 表单验证的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！