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()
  • 相关阅读:
    Java原生网络编程
    网络协议
    SQL优化
    执行计划
    UDP client,UDP server, TCP server, TCP client
    Java使用TCP聊天程序
    Java使用UDP聊天程序
    First Bad Version
    对SNMP4J的一些封装
    Eclipse swt开发环境搭建
  • 原文地址:https://www.cnblogs.com/wuss/p/10028181.html
Copyright © 2011-2022 走看看