<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()

vue 验证电话的更多相关文章

  1. 自己的一个验证电话和ecshop验证电话

    //验证电话 function checkPhone($phone) { $preg_mobile = preg_match("/^1\d{10}$/", $phone ); $p ...

  2. VUE验证器哪家强? VeeValidate absolutely!

    VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...

  3. vue-validator(vue验证器)

    官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-v ...

  4. element-ui表单验证(电话,邮箱)

    element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...

  5. vue验证时间范围

    验证时间范围 type="daterange" <DatePicker class="formItem" :size="size" v ...

  6. vue 拨打电话

    <a v-bind:href="'tel:'+(order.orderer.phone)">{{order.orderer.phone}}</a> v-bi ...

  7. 比较旧的写法:验证车牌、手机号、电话、qq等

    1.验证车牌代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. koa2+mysql+vue实现用户注册、登录、token验证

    说明: node.js提供接口,vue展现页面,前后端分离,出于编辑器功能和编辑习惯,vue用HbuilderX,node.js用VScode.(PS:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...

  9. vue form 验证

    vue 验证 <Form :model="formModel" label-position="center" :label-width="90 ...

随机推荐

  1. python2 线程基础

    1,感谢菜鸟教程, 线程基础:导入,创建函数,创建线和运行 import thread import time # 为线程定义一个函数 def print_time(threadName, delay ...

  2. LeetCode第十七题-电话号码的字母组合

    Letter Combinations of a Phone Number 问题简介: 给定包含2-9的数字的字符串,返回该数字可能表示的所有可能的字母组合. 下面给出了数字到字母的映射(就像在电话按 ...

  3. Python学习笔记-CGI编程(如何在IIS上挂Python开发的Webservice)

    一.如何用Python开发一个简单的Webservice 利用python的cgi编程,可以传入参数将结果输出. 定义需要编码以及需要引用的模块 #conding=utf-8 #修正中文乱码 impo ...

  4. Gitlab_ansible_jenkins三剑客③Ansible的安装及使用

    一台服务器可能会安装不同的python应用,不同的应用可能使用的模块版本不同,如果都安装在同样的环境下容易冲突,为了避免冲突,引入virtualenv 这个包管理工具进行环境的隔离 使用pip安装之前 ...

  5. LeetCode.接雨水

    题外话:LeetCode上一个测试用例总是通不过(我在文章末贴出通不过的测试用例),给的原因是超出运行时间,我拿那个测试用例试了下2.037ms运行完.我自己强行给加了这句: && m ...

  6. 【原创】大数据基础之Impala(3)部分调优

    1)将coordinator和executor角色分离 By default, each host in the cluster that runs the impalad daemon can ac ...

  7. PHP获取汉字首字母并分组排序

    <?php /** * 错误状态码定义 * User: xiucai * Date: 2018/3/11 * Time: 12:23 */ namespace extend; class Wor ...

  8. java - day006 - 构造方法

    构造方法 新建对象是,执行的一个特殊方法 new 类名(); 这个小括号就是构造方法 Java 类中,必须有构造方法,如果自己不定义, 编译器会自动生成默认构造方法 new 关键字是新建对象用的,   ...

  9. UiAutomator2.0 - Toast信息的验证

    目录 问题:在做UI自动化测试时,偶尔会碰到 Toast 这种提示信息(如图),通过Uiautomatorviewer 无法获该类控件的信息.所以无法验证,该条case不能实现.然后就没然后了... ...

  10. Git初始配置和基本使用

    初次运行Git前的配置 本文是在安裝完git以后首先应做到一些配置,安装教程可以参考廖雪峰git教程 用户信息 当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址. 这样做很重要,因为每 ...