uniapp表单校验详解

小蓝 • 2024-12-12 12:51 • 编程

一、基本概念

uniapp表单校验是指在用户提交表单前进行数据格式检查，以保证数据的正确性和完整性，防止用户非法提交数据。表单校验通常包括以下几种类型：

1、非空验证：判断输入框输入内容是否为空，如果为空则提示错误信息；

2、数据格式验证：判断输入框输入内容是否符合指定的数据格式，比如邮箱、电话号码、身份证号码等；

3、数据范围验证：判断输入框输入内容是否在指定范围内，比如年龄、金额等。

uniapp提供了表单校验的方法，我们可以使用这些方法来完成表单校验的功能。

二、示例代码

以下是一个基本的表单校验示例：

<template>
  <div>
    <form @submit="submit">
      <div>
        <label>姓名</label>
        <input type="text" v-model="name" />
      </div>
      <div>
        <label>年龄</label>
        <input type="number" v-model="age" />
      </div>
      <div>
        <label>邮箱</label>
        <input type="email" v-model="email" />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        age: '',
        email: ''
      }
    },
    methods: {
      submit() {
        // 验证姓名是否为空
        if (this.name.trim() === '') {
          uni.showToast({
            title: '姓名不能为空',
            icon: 'none'
          })
          return
        }
        // 验证年龄是否为数字
        if (isNaN(this.age)) {
          uni.showToast({
            title: '年龄必须为数字',
            icon: 'none'
          })
          return
        }
        // 验证邮箱格式
        var reg = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,4}$/
        if (!reg.test(this.email)) {
          uni.showToast({
            title: '邮箱格式不正确',
            icon: 'none'
          })
          return
        }
        // 提交数据
      }
    }
  }
</script>

三、常用校验方法

uniapp提供了一些常用的表单校验方法，可以方便我们完成表单校验的功能，以下是常用的表单校验方法：

1、非空验证：

if (this.name.trim() === '') {
  uni.showToast({
    title: '姓名不能为空',
    icon: 'none'
  })
  return
}

2、数据格式验证：

// 验证邮箱格式
var reg = /^[a-z0-9]+@[a-z0-9]+\.[a-z]{2,4}$/
if (!reg.test(this.email)) {
  uni.showToast({
    title: '邮箱格式不正确',
    icon: 'none'
  })
  return
}

3、数据范围验证：

// 验证年龄是否在18-50岁之间
if (this.age  50) {
  uni.showToast({
    title: '年龄必须在18-50岁之间',
    icon: 'none'
  })
  return
}

四、自定义校验方法

在实际开发中，我们可能需要对一些特殊的数据格式进行校验，这时我们可以自定义校验方法来完成校验功能。

自定义校验方法通常包含以下几个步骤：

1、编写正则表达式；

2、在校验方法中使用正则表达式进行数据格式校验；

3、调用自定义校验方法实现数据格式校验。

以下是一个自定义校验方法的示例代码：

<template>
  <div>
    <form @submit="submit">
      <div>
        <label>手机号码</label>
        <input type="text" v-model="mobile" />
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mobile: ''
      }
    },
    methods: {
      // 自定义校验方法
      checkMobile() {
        var reg = /^1[3|4|5|7|8][0-9]{9}$/
        if (!reg.test(this.mobile)) {
          uni.showToast({
            title: '手机号码格式不正确',
            icon: 'none'
          })
          return false
        }
        return true
      },
      submit() {
        // 调用自定义校验方法
        if (!this.checkMobile()) {
          return
        }
        // 提交数据
      }
    }
  }
</script>

五、结语

表单校验是我们在开发中经常使用的功能，uniapp 提供了丰富的表单校验方法，可以方便我们完成表单校验的功能。同时，我们也可以根据开发需求自定义表单校验方法，以便完成更灵活的表单校验功能。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/242704.html