uni-app 表单输入验证

uni-app 表单输入验证

表单输入验证是个很普通的事情，已经有很多功能强大而又好用的框架，但uni-app框架里面竟然没有找到。感觉应该有很大的需求。

2 回复

hello uni-app的模板里有

更多关于uni-app 表单输入验证的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，表单输入验证是一个常见的需求，通常用于确保用户输入的数据符合特定的格式或规则。uni-app 提供了多种方法来实现表单验证，其中最常见的是使用 rules 属性结合 form 组件的验证功能。下面是一个简单的示例，展示了如何在uni-app中实现表单输入验证。

首先，确保你的项目已经安装并配置了uni-app的基本环境。

1. 创建表单页面

在 pages 目录下创建一个新的页面，例如 formValidation.vue。

<template>
  <view>
    <form @submit="handleSubmit" :rules="rules" ref="formRef">
      <view>
        <label>用户名:</label>
        <input v-model="formData.username" placeholder="请输入用户名" name="username" />
      </view>
      <view>
        <label>密码:</label>
        <input type="password" v-model="formData.password" placeholder="请输入密码" name="password" />
      </view>
      <button type="submit">提交</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 15, message: '用户名长度应在3到15个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit(e) {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          });
          // 在这里处理表单提交逻辑
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

2. 解释代码

  • form 组件的 rules 属性定义了表单验证规则。
  • 每个字段的验证规则是一个数组，每个规则对象包含 required、message、trigger 等属性。
  • trigger 属性指定触发验证的事件，如 blur（失去焦点）。
  • handleSubmit 方法在表单提交时调用，通过 this.$refs.formRef.validate 方法进行验证。
  • 如果验证通过，则显示成功提示并执行提交逻辑；如果验证失败，则输出错误信息。

这个示例展示了如何在uni-app中使用表单验证功能，确保用户输入的数据符合指定的规则。你可以根据实际需求扩展和修改验证规则。

回到顶部