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

Vue表单提交与验证

最新推荐文章于 2025-08-28 17:29:09 发布

原创最新推荐文章于 2025-08-28 17:29:09 发布 · 3.3w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue-form #表单验证是否为空值

Vue.js 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建的表单示例，重点讲解如何通过@click和@submit.prevent来触发表单提交，并在submit方法中进行输入验证，如姓名、手机号及导购的选择等。

重点部分：点击表单的 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
        }
    }