search

varletjs / varlet-vue2

Material design mobile component library for Vue2 / 基于 Vue2 的 Material design 风格移动端组件库
https://varlet.gitee.io/varlet-ui-vue2/#/en-US/index
MIT License
149 stars 27 forks source link

form表单校验一直是false #64

Closed mengyix closed 1 year ago

mengyix commented 1 year ago

About docs

mengyix commented 1 year ago

form表单校验一直是false

mengyix commented 1 year ago

vue2

haoziqaq commented 1 year ago

方便的话，提供一个复现 demo

haoziqaq commented 1 year ago

有可以跑起来的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 =&gt; v.length === 6 || '验证码长度必须为6位数']"                focus-color="#797272" blur-color="#afa1a1" v-model="form.code"/&gt;   </var-form&gt;   <var-button @click="login" class="login-btn" type="danger" size="large"&gt;登录</var-button&gt; </div&gt; <div class="agreement"&gt;   <var-radio checked-icon="check-circle-outline" checked-color="#e54847" v-model="form.agreementVisible"              :rules="[v =&gt; v || '请先阅读并勾选用户协议']"&gt;     <template #checked-icon&gt;       <var-icon name="check-circle-outline"/&gt;     </template&gt;     <template #unchecked-icon&gt;       <var-icon name="radio-blank"/&gt;     </template&gt;     我已阅读并同意 <a style="color: #e54847"&gt;《微光用户服务协议》 《隐私政策》</a&gt;   </var-radio&gt; </div&gt; <div class="info"&gt;   <div&gt;客服电话: <a style="color: #e54847"&gt;1010-5335</a&gt;</div&gt;   <div&gt;未注册的手机号将自动注册新账号</div&gt; </div&gt;

<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 1 year ago

顺便提供一下组件库和vue的版本

mengyix commented 1 year ago

单组件可以吗?

mengyix commented 1 year ago

vue 2.6.14 varlet-ui 0.1.4

mengyix commented 1 year ago

梦呓 @.***

 

------------------ 原始邮件 ------------------ 发件人: "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 1 year ago

单文件组件在附件里

haoziqaq commented 1 year ago

升级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 1 year ago

解决了

mengyix commented 1 year ago

升级之后没有这个bug了