uniapp表单验证
2024-01-07 19:01:24
以下是一个简单的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()方法弹出提示消息。如果校验通过,我们就可以提交表单了。
需要注意的是,这个示例只是一个简单的表单验证示例,实际应用中,我们还需要进行更加复杂的表单验证,例如手机号码、邮箱、身份证号码等的验证。
?
文章来源:https://blog.csdn.net/m0_71966801/article/details/135433241
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!