zoukankan      html  css  js  c++  java
  • vue 验证电话

    <el-form :model="orderaddForm" :rules="rulesPhone" ref="orderaddForm" label-width="100px" class="oncall_mesgbox clearfix">
       <el-form-item label="联系人电话" prop="new_phone">
        <el-input type="text" autocomplete="off" v-model="orderaddForm.contactTelephone"></el-input>
      </el-form-item> </el-form>   <div slot="footer" class="dialog-footer"> <el-button @click="dialogaddorder = false">取消</el-button>     <el-button type="primary" @click="submitaddWorkOrderForm('orderaddForm')">提交</el-button>  </div>

    注意:

      按钮绑定form-:对应model

      输入框el-input (v-model):对应form-model.某名称,自定

    vue验证:

             data() {
             //电话验证
                    const validatePhone = (rule, value, callback) => {//定义规则
                        let reg = /^1[345789]d{9}$/;
                        if (value != '' && reg.test(value)) {
                            callback()
                        } else {
                            callback(new Error('请输入正确的手机号'))
                        }
                    }
                    return {
                        rulesPhone: {//电话验证-对应form-:rules
                            new_phone:[{//对应item-prop
                                validator: validatePhone,//对应上方规则
                                trigger: 'change'//修改验证
                            }]
                        },
                    }  

    延伸:

    data form内的对象字段都要(必须)定义:

    data() {
      
    return {     orderaddForm:{//form名称一般弹出框       contactTelephone:'',
       },   } }

    延伸:

    引用函数:

    this. functionName()
  • 相关阅读:
    LeetCode 275. H-Index II
    LeetCode 274. H-Index
    LeetCode Gray Code
    LeetCode 260. Single Number III
    LeetCode Word Pattern
    LeetCode Nim Game
    LeetCode 128. Longest Consecutive Sequence
    LeetCode 208. Implement Trie (Prefix Tree)
    LeetCode 130. Surrounded Regions
    LeetCode 200. Number of Islands
  • 原文地址:https://www.cnblogs.com/wuss/p/10028181.html
Copyright © 2011-2022 走看看