以下是一个简单的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://www.toymoban.com/news/detail-719332.html
需要注意的是,这个示例只是一个简单的表单验证示例,实际应用中,我们还需要进行更加复杂的表单验证,例如手机号码、邮箱、身份证号码等的验证。文章来源地址https://www.toymoban.com/news/detail-719332.html
到了这里,关于uniapp表单验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!