element手机验证格式_vue+element表单验证(身份证(校验),手机号码,导游证号码)...
基于vue.js 和 element-ui 的 validate验证实现
class="input-cardnum"
name="card"
v-model="rulesFrom.credentialsCode"
autocomplete="off"
>
class="input-cardnum"
name="card"
v-model="rulesFrom.mobile"
autocomplete="off"
>
data(){
const idCardValidity = (rule, code, callback) => {
var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
var tip = ""
var pass = true
if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
tip = "身份证号格式错误"
pass = false;
} else if (!city[code.substr(0, 2)]) {
// tip = "地址编码错误"
tip="身份证输入错误"
pass = false
} else {
// 18位身份证需要验证最后一位校验位
if (code.length === 18) {
code = code.split('')
// ∑(ai×Wi)(mod 11)
// 加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// 校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
var sum = 0
var ai = 0
var wi = 0
for (var i = 0; i < 17; i++) {
ai = code[i]
wi = factor[i]
sum += ai * wi
}
var last = parity[sum % 11];
if (parity[sum % 11] != code[17]) {
// tip = "校验位错误"
tip="身份证输入错误"
pass = false
}
}
}
if (!pass) {
callback(new Error(tip))
} else {
callback()
}
}
// 设置手机号的验证规则
const phoneRules = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入联系方式'))
} else {
const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的电话'))
}
}
}
}
return {
rulesFrom:{
credentialsCode:" ",
mobile:" "
},
rules: {
credentialsCode: [{ required: true, message: '请输入证件号', trigger: 'blur' },
{
pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
message: '请输入正确的证件号'
},
{ validator: idCardValidity, trigger: 'blur' }],
cardphone:[
{validator:phoneRules,trigger:'blur'}
],
mobile:[
{required: true,validator:phoneRules,trigger:'blur'}
],
tourGuideCardNum: [
{required: true,message: '请输入导游证号码',trigger: 'blur'},
{pattern: /([D][-]\d{4}[-]\d{6})/, message: '请输入正确导游证号码,例:D-0000-000000'}
],
},
}
注意:
1.规则方法写在data里return之前
身份证有效性校验规则来源与百度
校验公示:∑(ai×Wi)(mod 11)
element手机验证格式_vue+element表单验证(身份证(校验),手机号码,导游证号码)...相关推荐
- 客户端表单验证_客户端的表单验证
客户端表单验证 在客户端进行表单验证是必不可少的-它可以节省时间和带宽,并为您提供更多选择,以指出用户填写表单时出错的地方. 话虽如此,我并不是说您不需要服务器端验证. 访问您网站的用户可能使用旧的浏 ...
- 仿联想商城laravel实战---4、验证(lavarel的表单验证如何使用)
仿联想商城laravel实战---4.验证(lavarel的表单验证如何使用) 一.总结 一句话总结: 验证规则和验证信息的数组:在控制器的方法中 1.注册页面中的用户名正确(比如是否重名,字段长度是 ...
- html自动验证邮件地址格式,JavaScript表单验证和邮箱格式验证的方法
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
- vue el-form表单验证,多表单验证及动态数据项表单验证
form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的.那么只需要写 ...
- jQuery 表单验证设置html(,jquery表单验证.html
jquery表单验证 .myform { width: 600px; margin: 50px auto 0; } .p { border: 1px #cecece solid; width: 480 ...
- php 验证 e mail,PHP 表单验证 - 验证 E-mail 和 URL
PHP 表单验证 - 验证 E-mail 和 URL 本节展示如何验证名字.电邮和 URL. PHP - 验证名字 以下代码展示的简单方法检查 name 字段是否包含字母和空格.如果 name 字段无 ...
- php 验证 e mail,PHP表单验证Name,E-mail,和URL-三体教程在线编辑器
三体教程(santii.com) .error {color: #FF0000;} // 定义变量并默认设置为空值 $nameErr = $emailErr = $genderErr = $websi ...
- php表单验证代码实例,PHP表单验证实例代码-三体教程在线编辑器
三体教程(santii.com) .error {color: #FF0000;} // 定义变量并默认设置为空值 $nameErr = $emailErr = $genderErr = $websi ...
- jQuery 表单验证设置html(,jquery表单验证
如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...
- html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持 解决方案: 可以在date ...
最新文章
- EFQRCode:自动生成花式二维码
- Shiro权限控制笔记要点
- C++中类成员函数的重载、覆盖和隐藏的区别,超清楚!
- PAT_B_1004_Java(20分)
- 金蝶国际公布2020年全年业绩,云业务收入增长45.6%
- 理解python - 类
- 计算机专业论文选题网站方面,5大网站汇总,搞定新颖的计算机专业毕业设计网站汇总...
- 剑指 Offer II 056 二叉搜索树中两个节点之和
- Hive分区表创建,增加及删除
- MVC如何分离Controller与View在不同的项目
- flask 导出excel
- 医疗his系统的优势
- ffmpeg连接rtsp流提示Connection refused
- hive执行出现问题:Ended Job = job_1667594872527_3123 with errors Error during job, obtaining debugging info
- 六级考研单词之路-四
- 双十一买什么充电宝好?实惠好用的充电宝推荐
- VM安装的虚拟机如何在局域网内互相访问
- kali linux查看版本,kali linux 系统版本的查看方法
- C语言第五章Structures Unions
- 分布式系统:FLP Impossibility/CAP原理
热门文章
- 大型系统集成项目流程方案设计图
- java毕业设计会员刷卡积分管理系统mybatis+源码+调试部署+系统+数据库+lw
- java——7个小案例
- linux查询hba卡驱动版本,Linux下查看HBA卡的驱动版本和WWPN
- 【精选】抽奖点名、随机抽奖PPT素材合集,年会、老师必备
- win7系统iis服务器删除,Win7系统如何卸载iis 删除win7中iis的方法
- 图像风格迁移 CycleGAN原理
- 阿里iconfont图标的使用教程
- Qt+VS+opencv+zbar打开本机摄像头实现二维码扫码识别功能
- Java一键生成PDF合同以及骑缝章、盖章处的精准盖章