HbuildX 3.1.22.20210709
uni-forms 1.2.0
login.nvue / login.vue,都试过,同样的问题
<template>
<view class="wrap">
<!-- 背景 -->
<image class="login-bg" mode="widthFix" src="/static/img/user/newlogin.png"></image>
<view class="login-box">
<!-- 输入 -->
<view class="login-box-border flex-column">
<image class="login-box-logo" mode="widthFix" src="/static/img/user/newlogo.png"></image>
<text class="login-box-title">济南建筑产业工人实训考核平台</text>
<uni-forms :rules="rules" v-model="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
<uni-forms-item name="mobile">
<uni-easyinput v-model="formData.mobile" class="login-box-input login-box-input__mobile" prefixIcon="person" type="number" confirmType="next" maxlength="11" placeholder="请输入手机号" ></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="code">
<uni-easyinput v-model="formData.code" class="login-box-input login-box-input__code" prefixIcon="locked" type="number" maxlength="4" placeholder="验证码" ></uni-easyinput>
</uni-forms-item>
</uni-forms>
<button class="login-box-login flex-column" @click="submitForm('form')">
<text class="login-box-login-text">登录/注册</text>
</button>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
formData: {
mobile: '',
code: ''
},
rules: {
mobile: [{
required: true,
errorMessage: '请输入手机号'
}, {
minLength: 11,
maxLength: 11,
errorMessage: '请输入正确的手机号'
}],
code: [{
required: true,
errorMessage: '请输入验证码'
}, {
minLength: 4,
maxLength: 4,
errorMessage: '请输入正确的验证码'
}]
}
}
},
methods: {
/**
* 手动提交
* @param {Object} form
*/
submitForm(form) {
// console.log(this.formData);
this.$refs[form]
.validate()
.then(res => {
console.log('表单的值:', res)
uni.showToast({
title: '验证成功'
})
})
.catch(errors => {
console.error('验证失败:', errors)
})
},
}
}
</script>
b***@163.com (作者)
对劲!
2021-07-14 10:55