vant表单手机号码校验

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>vant表单验证</title>
</head><body><div id="app"><van-form ref='form'><!-- 手机号码 --><van-field label="手机号码：" v-model='mobile' placeholder="请输入手机号码" :rules="telRules" name="mobile"></van-field><!-- 验证码 --><van-field label="验证码" v-model="code" placeholder="请输入验证码" :rules="codeRules"><!-- 通过 button 插槽可以在输入框尾部插入按钮 --><template #button><!-- 这里有bug，使用<van-button>无法进行局部表单验证 --><!-- <van-button size="small" type="primary" @click="getCode">发送验证码</van-button> --><div class="button" @click="getCode">发送验证码</div></template></van-field><van-button type="primary" block @click="submit">提交</van-button></van-form></div><!-- 引入样式文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /><!-- 引入 Vue 和 Vant 的 JS 文件 --><script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script><script>// 在 #app 标签下渲染一个按钮组件new Vue({el: '#app',data: {mobile: '', // 手机号码code: '', // 验证码// 校验手机号码telRules: [{required: true,message: '手机号码不能为空',trigger: 'onBlur'}, {// 自定义校验规则validator: value => {return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)},message: '请输入正确格式的手机号码',trigger: 'onBlur'}],codeRules: [{required: true,message: '验证码不能为空',trigger: 'onBlur'}]},methods: {getCode() {// 局部表单验证this.$refs.form.validate('mobile').then(() => {this.$toast.success('验证码获取成功')}).catch(() => {this.$toast.fail('验证码获取失败')})},submit() {// 全局表单验证this.$refs.form.validate().then(() => {this.$toast.success('提交成功')}).catch(() => {this.$toast.fail('提交失败')})}}});</script>
</body>
</html>

vant表单手机号码校验相关推荐

表单手机号邮箱 qq检验工具类
package com.atguigu.common.util;import java.util.regex.Matcher; import java.util.regex.Pattern;/*** ...
vue中的表单手机号和邮箱自定义验证规则
文章目录前言手机号和邮箱的自定义验证前言我们在开发过程中使用element UI 或者element-plus 中的表单的时候,会使用到表单验证,比如手机号和邮箱的验证: 手机号和邮箱的自定义 ...
Ant Design 表单手机号验证
rules :[{pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: '请输入正确的手机号'} ] 或者 rules :[{pattern: /^1(3[0-9] ...
工作流表单手写签章控件失效的处理方法
09升级到10,有部分用户出现购买的表单手写控件出现失效的情况,基于此,再次总结以下解决方法. 初始安装:正式购买版式文件后,此控件的安装方法是:将文件名为"WebSign.dll" ...
通达OA-今日学习：OFFICE文档在线编辑控件与工作流表单手写签章控件的区别是什么？
NTKOOFFICE文档在线编辑控件,控件提供商为重庆软航科技,使用范围:OA各个模块上传附件(比如文件柜.工作流.公告通知等模块),如果是Office文档,就可以在线编辑或阅读,在线编辑时可以加盖电 ...
vant表单组件+iconfont组合使用 - 代码篇
vant框架的 form表单组件.iconfont , 组合使用案例. 案例截图引用 · 字体文件: vantUI 自定义引入iconfont图标(3种风格)- 案例篇调用 · 字体文件: tem ...
vant表单checkbox验证问题
项目中使用了vant的表单,提交时有非空验证.单选.输入框都验证成功了,唯独复选框验证失败,选择选项之后还是显示未选择.官网和搜索引擎都找了下并没有找到答案. 因为之前布局问题使用了<van-r ...
获取手机验证码——Vant表单验证/后端框架express/前后端交互
完成一个获取手机验证码的功能,在获取之前要对手机号进行表单验证,判断是否输入/输入的是否为正确格式,获取手机验证码后可等待n秒重新获取,代码如下: <template><div cl ...
vant表单点击提交没有触发验证_vant(ZanUi)结合async-validator实现表单验证的方法
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 最近在开发一个移动端商城项目,用到了有赞的 vant ,因为最近大都采用 element ui 在做PC端的东西,对比来说,vant的完成 ...

vant表单手机号码校验

vant表单手机号码校验相关推荐

最新文章

热门文章