微信小程序真机测试表单验证时报错: _vm.handleInput is not a function
<template>
<view class="container" uni-common-mt>
<view class="title">用户注册</view>
<u-form ref="regForm" :model="form" class="reg-form" label-width="120">
<u-form-item prop="regCode" :required="true">
<u-input v-model="form.regCode" placeholder="请输入注册码" focus/>
</u-form-item>
<u-form-item prop="name" :required="true">
<u-input v-model="form.name" placeholder="请输入用户姓名"/>
</u-form-item>
<u-form-item prop="mobile" :required="true">
<u-input v-model="form.mobile" placeholder="请输入手机号码"/>
</u-form-item>
<u-form-item prop="password" :required="true">
<u-input v-model="form.password" type="password" placeholder="请输入密码"/>
</u-form-item>
<u-form-item prop="checkCode" :required="true">
<u-input v-model="form.checkCode" type="password" placeholder="再次输入密码"/>
</u-form-item>
<u-form-item :border-bottom="false" label="验证码:">
<u-input :placeholder="getAuthcode" :disabled="true" placeholder-style="color: #3F6FFE;fontWeight: bold;fontSize:32rpx;"/>
<u-button slot="right" type="primary" size="mini" @click="getCode">已发送</u-button>
</u-form-item>
<view class="hint">注:请将验证码发送至<text>13512716637</text>后点击已发送按钮</view>
</u-form>
<u-button type="primary" :custom-style="btnStyle" @click="sub" >注册</u-button>
</view>
</template>
<script>
import { checkAuthcode,checkMobile,checkRegcode,userReg } from '@/common/api/login.js'
export default {
computed:{
// 验证码
getAuthcode() {
const row = String(Math.floor(Math.random() * 9)) +
String(Math.floor(Math.random() * 9)) +
String(Math.floor(Math.random() * 9)) +
String(Math.floor(Math.random() * 9))
return row
}
},
data() {
return {
btnStyle:{
position: 'absolute',
bottom: '50px',
left: '50%',
transform: 'translateX(-50%)',
width: '70%',
height: '90rpx'
},// 按钮样式
rules: {
regCode: [
{
required: true,
message: '注册码不能为空!',
// trigger: ['blur']
},
{
asyncValidator: (rule, value, callback) => {
checkRegcode({
data:{ code:value },
callback: (res) => {
if(res) {
callback()
} else {
callback(new Error('注册码无效!'))
}
}
})
},
// trigger: ['blur']
}
],
name:[
{
required: true,
message: '姓名不能为空!',
// trigger: ['blur']
},
{
pattern: /^[\u4e00-\u9fa5\\w]{2,4}$/,
message: "请输入正确的中文姓名",
trigger: 'change'
}
],
mobile:[
{
required: true,
message: '手机号不能为空!',
// trigger: ['blur']
},
{
pattern: /^1[34578]\d{9}$/,
message: "请输入正确的11位手机号码",
trigger: 'change'
},
{
asyncValidator: (rule, value, callback) => {
checkMobile({
data:{ name:value },
callback: (res) => {
if(res) {
callback(new Error('手机号已存在!'))
} else {
callback()
}
}
})
},
}
],
password:[
{
required: true,
message: '密码不能为空!',
// trigger: ['blur']
},
{
pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8}$/,
message: "请输入包含字母、数字的8位密码",
trigger: 'change'
}
],
checkCode:[
{
required: true,
message: '请确认密码!',
// trigger: ['blur'],
},
{
validator: (rule, value, callback) => {
return value === this.form.password;
},
message: '两次输入的密码不一致!',
trigger: 'change'
}
]
},// 正则验证
form:{
regCode:'',
name:'',
mobile:'',
password:'',
checkCode:''
},// 表单信息
authCode:'',// 验证码
check:false
}
},
methods:{
// 短信校验
getCode(){
},
// 提交
sub(){
}
},
onReady() {
this.$refs.regForm.setRules(this.rules)
}
}
</script>
唬唬唬
- 发布:2020-12-17 18:01
- 更新:2020-12-30 20:27
- 阅读:1536
唬唬唬 (作者)
没有 说是微信小程序的bug,你也遇到了么?
2020-12-31 08:59