uniapp表单验证

以下是一个简单的uniapp表单验证示例:

复制代码
<template>
  <view class="uni-form">
    <view class="uni-form-item">
      <view class="uni-form-label">用户名</view>
      <input type="text" v-model="username" placeholder="请输入用户名" />
    </view>
    <view class="uni-form-item">
      <view class="uni-form-label">密码</view>
      <input type="password" v-model="password" placeholder="请输入密码" />
    </view>
    <view class="uni-form-item">
      <button type="primary" @click="submitForm">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      if (!this.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return;
      }
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return;
      }
      // 校验通过,提交表单
      console.log('用户名:' + this.username);
      console.log('密码:' + this.password);
    }
  }
};
</script>

<style scoped>
.uni-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.uni-form-label {
  width: auto;
  margin-right: 20px;
}

.uni-form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  border-radius: 20px;
  border: none;
}
</style>

在上面的示例中,我们定义了一个包含两个输入框和一个提交按钮的表单,当用户点击提交按钮时,我们首先校验表单数据是否合法,如果校验不通过,我们会使用uni.showToast()方法弹出提示消息。如果校验通过,我们就可以提交表单了。

需要注意的是,这个示例只是一个简单的表单验证示例,实际应用中,我们还需要进行更加复杂的表单验证,例如手机号码、邮箱、身份证号码等的验证。

相关推荐
浩星1 分钟前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱4 分钟前
element plus 多个form校验
前端
yume_sibai13 分钟前
HTML HTML基础(3)
前端·html
米花丶20 分钟前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
唐•苏凯1 小时前
ArcGIS Pro 遇到严重的应用程序错误而无法启动
开发语言·javascript·ecmascript
萌萌哒草头将军1 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴1 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js