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()方法弹出提示消息。如果校验通过，我们就可以提交表单了。

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