form表单校验一直是false
Closed this issue · 12 comments
mengyix commented
About docs
mengyix commented
form表单校验一直是false
mengyix commented
vue2
haoziqaq commented
方便的话，提供一个复现 demo
haoziqaq commented
有可以跑起来的demo么，这个代码片段没有关键的信息。
…---原始邮件---
发件人: ***@***.***>
发送时间: 2022年11月24日(周四) 晚上8:59
收件人: ***@***.***>;
抄送: ***@***.******@***.***>;
主题: Re: [varletjs/varlet-vue2] form表单校验一直是false (Issue #64)
{{ sendBtn }} <var-input style="margin-top: 2.778vw;" placeholder="请输入短信验证码" :rules="[v => v.length === 6 || '验证码长度必须为6位数']" focus-color="#797272" blur-color="#afa1a1" v-model="form.code"/> </var-form> <var-button @click="login" class="login-btn" type="danger" size="large">登录</var-button> </div> <div class="agreement"> <var-radio checked-icon="check-circle-outline" checked-color="#e54847" v-model="form.agreementVisible" :rules="[v => v || '请先阅读并勾选用户协议']"> <template #checked-icon> <var-icon name="check-circle-outline"/> </template> <template #unchecked-icon> <var-icon name="radio-blank"/> </template> 我已阅读并同意 <a style="color: #e54847">《微光用户服务协议》 《隐私政策》</a> </var-radio> </div> <div class="info"> <div>客服电话: <a style="color: #e54847">1010-5335</a></div> <div>未注册的手机号将自动注册新账号</div> </div>
<script> import MyHeader from "@/components/common/MyHeader"; import {user} from '@/request' import {Snackbar} from ***@***.***/ui' export default { name: "index", components: {MyHeader}, data() { return { disabled: false, readonly: false, form: { account: "", code: "", agreementVisible: false }, //按钮 sendBtn: '发送验证码', //定时器 timer: null, count: 60 } }, methods: { async login() { let bool = await this.$refs.form.validate() console.log(bool); // if (this.phone(this.form.account) && this.form.code.length === 6 && this.form.agreementVisible) { // // } }, phone(str) { let reg = /^1[3456789]\d{9}$/; if (reg.test(str)) { console.log('合法'); return true; } else { // console.log('不合法'); console.log('手机格式不正确'); return false; } }, async sendCode() { const result = await user.sendCode({ account: this.form.account }) if (result.code === 200) { localStorage.setItem("codeKey", result.data); this.timer = setInterval(() => { //每执行一次计时器 倒计时-1 this.sendBtn = this.count-- + ""; }, 1000) } else { Snackbar.error(result.data) } } }, watch: { count(newVal, oldVal) { if (oldVal === 0) { //当倒计时为0时恢复按钮样式 this.sendBtn = "发送验证码"; //清楚计时器 clearInterval(this.timer); //还原倒计时 this.count = 60; } } } } </script> <style scoped> .content { margin-top: 5.556vw; padding: 5.556vw; } .login-btn { margin-top: 5.556vw; width: 100%; border-radius: 13.889vw; } .code { font-size: 4.167vw; color: #e54847; } .agreement { font-size: 3.611vw; color: #7f7f7f; text-align: center; } .login { height: 100vh; } .info { text-align: center; font-size: 3.611vw; color: #7f7f7f; margin-top: 8.333vw; } </style>
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
haoziqaq commented
顺便提供一下组件库和vue的版本
mengyix commented
单组件可以吗?
mengyix commented
vue 2.6.14
varlet-ui 0.1.4
mengyix commented
梦呓
***@***.***
…------------------ 原始邮件 ------------------
发件人: "varletjs/varlet-vue2" ***@***.***>;
发送时间: 2022年11月24日(星期四) 晚上10:10
***@***.***>;
***@***.******@***.***>;
主题: Re: [varletjs/varlet-vue2] form表单校验一直是false (Issue #64)
顺便提供一下组件库和vue的版本
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.Message ID: ***@***.***>
mengyix commented
单文件组件在附件里
haoziqaq commented
升级varlet版本到0.1.7 应该能解决你的问题。
…------------------ 原始邮件 ------------------
发件人: ***@***.***>;
发送时间: 2022年11月24日(星期四) 晚上10:21
收件人: ***@***.***>;
抄送: ***@***.***>; ***@***.***>;
主题: Re: [varletjs/varlet-vue2] form表单校验一直是false (Issue #64)
单文件组件在附件里
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
mengyix commented
解决了
mengyix commented
升级之后没有这个bug了