一、基本概念
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 < 18 || 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 提供了丰富的表单校验方法,可以方便我们完成表单校验的功能。同时,我们也可以根据开发需求自定义表单校验方法,以便完成更灵活的表单校验功能。