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()
vue 验证电话的更多相关文章
- 自己的一个验证电话和ecshop验证电话
//验证电话 function checkPhone($phone) { $preg_mobile = preg_match("/^1\d{10}$/", $phone ); $p ...
- VUE验证器哪家强? VeeValidate absolutely!
VUE验证器哪家强? VeeValidate absolutely! vee-validate表单验证用法 github地址:https://github.com/baianat/vee-valida ...
- vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-v ...
- element-ui表单验证(电话,邮箱)
element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...
- vue验证时间范围
验证时间范围 type="daterange" <DatePicker class="formItem" :size="size" v ...
- vue 拨打电话
<a v-bind:href="'tel:'+(order.orderer.phone)">{{order.orderer.phone}}</a> v-bi ...
- 比较旧的写法:验证车牌、手机号、电话、qq等
1.验证车牌代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- koa2+mysql+vue实现用户注册、登录、token验证
说明: node.js提供接口,vue展现页面,前后端分离,出于编辑器功能和编辑习惯,vue用HbuilderX,node.js用VScode.(PS:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...
- vue form 验证
vue 验证 <Form :model="formModel" label-position="center" :label-width="90 ...
随机推荐
- python2 线程基础
1,感谢菜鸟教程, 线程基础:导入,创建函数,创建线和运行 import thread import time # 为线程定义一个函数 def print_time(threadName, delay ...
- LeetCode第十七题-电话号码的字母组合
Letter Combinations of a Phone Number 问题简介: 给定包含2-9的数字的字符串,返回该数字可能表示的所有可能的字母组合. 下面给出了数字到字母的映射(就像在电话按 ...
- Python学习笔记-CGI编程(如何在IIS上挂Python开发的Webservice)
一.如何用Python开发一个简单的Webservice 利用python的cgi编程,可以传入参数将结果输出. 定义需要编码以及需要引用的模块 #conding=utf-8 #修正中文乱码 impo ...
- Gitlab_ansible_jenkins三剑客③Ansible的安装及使用
一台服务器可能会安装不同的python应用,不同的应用可能使用的模块版本不同,如果都安装在同样的环境下容易冲突,为了避免冲突,引入virtualenv 这个包管理工具进行环境的隔离 使用pip安装之前 ...
- LeetCode.接雨水
题外话:LeetCode上一个测试用例总是通不过(我在文章末贴出通不过的测试用例),给的原因是超出运行时间,我拿那个测试用例试了下2.037ms运行完.我自己强行给加了这句: && m ...
- 【原创】大数据基础之Impala(3)部分调优
1)将coordinator和executor角色分离 By default, each host in the cluster that runs the impalad daemon can ac ...
- PHP获取汉字首字母并分组排序
<?php /** * 错误状态码定义 * User: xiucai * Date: 2018/3/11 * Time: 12:23 */ namespace extend; class Wor ...
- java - day006 - 构造方法
构造方法 新建对象是,执行的一个特殊方法 new 类名(); 这个小括号就是构造方法 Java 类中,必须有构造方法,如果自己不定义, 编译器会自动生成默认构造方法 new 关键字是新建对象用的, ...
- UiAutomator2.0 - Toast信息的验证
目录 问题:在做UI自动化测试时,偶尔会碰到 Toast 这种提示信息(如图),通过Uiautomatorviewer 无法获该类控件的信息.所以无法验证,该条case不能实现.然后就没然后了... ...
- Git初始配置和基本使用
初次运行Git前的配置 本文是在安裝完git以后首先应做到一些配置,安装教程可以参考廖雪峰git教程 用户信息 当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址. 这样做很重要,因为每 ...