zoukankan      html  css  js  c++  java
  • vue 验证表单

    <input v-model="name" @blur="blurishow5" type="text" class="input" placeholder="请输入姓名" />
    <div style="clear:both;"></div>
    <div v-show="item.ishow5" class="titles">请输入姓名</div>
    </li>
    <li>
    <span>身份证号:</span>
    <input v-model="card" @blur="blurishow2" maxlength="18" type="text" class="input" placeholder="请输入身份证号" />
    <div style="clear:both;"></div>
    <div v-show="item.ishow2" class="titles">请输入正确的身份证号</div>
    </li>
    <li>
    <span>年龄:</span>
    <input v-model="age" @blur="blurishow6" type="number" class="input" placeholder="请输入年龄" />
    <div style="clear:both;"></div>
    <div v-show="item.ishow6" class="titles">请输入年龄</div>
    </li>
    <li>
    <span>民族:</span>
    <select placeholder="请选择民族" class="public-choice input" v-model="nation" @change="blurishow7">
    <option :value="coupon.nation" v-for="(coupon, index) in couponsLists" :key="index">{{ coupon.nation }}</option>
    </select>
    <!-- <input v-model="nation" @blur="blurishow7" type="text" class="input" placeholder="请选择民族" /> -->
    <div style="clear:both;"></div>
    <div v-show="item.ishow7" class="titles">请选择民族</div>
    </li>
    <li style="position:relative;">
    <span>手机号:</span>
    <input v-model="phone" @blur="blurishow1" maxlength="11" type="number" class="input phones" placeholder="请输入手机号" />
    <div v-show="numShow" class="huoqu" @click="changNums">获取验证码</div>
    <div v-show="!numShow" class="huoqu">{{ num }}s后重新获取</div>
    <div style="clear:both;"></div>
    <div v-show="item.ishow1" class="titles">请输入正确的手机号</div>
    </li>
    <li>
    <span>验证码:</span>
    <input v-model="verification" @blur="blurishow8" type="text" maxlength="6" class="input" placeholder="请输入验证码" />
    <div style="clear:both;"></div>
    <div v-show="item.ishow8" class="titles">请输入正确的验证码</div>
    </li>
    <li>
    <span>设置密码:</span>
    <input v-model="password" @blur="blurishow3" type="text" maxlength="18" class="input" placeholder="6-18位的密码,只允许英文、数字" />
    <div style="clear:both;"></div>
    <div v-show="item.ishow3" class="titles">请输入账号密码</div>
    </li>
    <li>
    <span>确定密码:</span>
    <input v-model="passwords" @blur="blurishow4" type="text" maxlength="18" class="input" placeholder="6-18位的密码,只允许英文、数字" />
    <div style="clear:both;"></div>
    <div v-show="item.ishow4" class="titles">请再次输入账号密码</div>

    item: {
    ishow1: false,
    ishow2: false,
    ishow3: false,
    ishow4: false,
    ishow5: false,
    ishow6: false,
    ishow7: false,
    ishow8: false,
    ishow9: false
    },

    sure () {
    //注册
    this.blurishow1();
    this.blurishow2();
    this.blurishow3();
    this.blurishow4();
    this.blurishow6();
    this.blurishow7();
    this.blurishow5();
    this.blurishow8();
    if (this.uuId == "") {
    Toast({
    message: "请先获取验证码",
    duration: 3000
    });
    }
    if (!this.item.ishow4 &&
    !this.item.ishow3 &&
    !this.item.ishow2 &&
    !this.item.ishow1 &&
    !this.item.ishow5 &&
    !this.item.ishow6 &&
    !this.item.ishow7 &&
    !this.item.ishow8 &&
    this.uuId !== ""
    ){

    去操作

    }


    </li>

    blurishow1 () {
    if (this.phone.trim().length !== 11 || this.phone.trim() == "") {
    this.item.ishow1 = true;
    } else {
    this.item.ishow1 = false;
    }
    },
    blurishow2 () {
    if (this.card.length !== 18 || this.card == "") {
    this.item.ishow2 = true;
    } else {
    this.item.ishow2 = false;
    }
    },
    blurishow3 () {
    if (this.password.length < 6 || this.password == "") {
    this.item.ishow3 = true;
    } else {
    this.item.ishow3 = false;
    }
    },
    blurishow4 () {
    if (
    this.passwords.length < 6 ||
    this.passwords == "" ||
    this.passwords !== this.password
    ) {
    this.item.ishow4 = true;
    } else {
    this.item.ishow4 = false;
    }
    },
    blurishow5 () {
    if (this.name.length < 2 || this.name == "") {
    this.item.ishow5 = true;
    } else {
    this.item.ishow5 = false;
    }
    },
    blurishow6 () {
    if (this.age.length == 0 || this.age == "") {
    this.item.ishow6 = true;
    } else {
    this.item.ishow6 = false;
    }
    },
    blurishow7 () {
    if (this.nation.length == 0 || this.nation == "") {
    this.item.ishow7 = true;
    } else {
    this.item.ishow7 = false;
    }
    },
    blurishow8 () {
    if (this.verification.length < 6) {
    this.item.ishow8 = true;
    } else {
    this.item.ishow8 = false;
    }
    }

  • 相关阅读:
    VS2013 更新系统.net framework4.8引起的datagridview添加列弹框的显示问题
    IIS发布获取apk文件,部署IIS遇到的问题记录
    C# winform 动态构建fastreport报表
    其他信息: 未能加载文件或程序集“WebGrease, Version=1.5.1.25624, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。找 到的程序集清单定义与程序集引用不匹配。 (异常来自 HRESULT:0x80131040)
    winform DataGridView的虚模式填充,CellValueNeeded事件的触发条件
    winform中的小技巧【自用】
    仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'XXX'中的标识列指定显式值。
    VS 2013Ultimate 开发过程中遇到的问题——listbox的隐藏问题,combobox.textchanged的中文问题
    AFO
    几个救了我命的小不等式
  • 原文地址:https://www.cnblogs.com/xzhce/p/13671789.html
Copyright © 2011-2022 走看看