当前位置: 代码迷 >> 综合 >> vue 如何优雅的做表单验证
  详细解决方案

vue 如何优雅的做表单验证

热度:97   发布时间:2024-03-07 19:15:53.0

这里我就拿手机号做例子

各国手机号的正则表达式如下:

'ar-DZ': /^(\+?213|0)(5|6|7)\d{8}$/,'ar-SY': /^(!?(\+?963)|0)?9\d{8}$/,'ar-SA': /^(!?(\+?966)|0)?5\d{8}$/,'en-US': /^(\+?1)?[2-9]\d{2}[2-9](?!11)\d{6}$/,'cs-CZ': /^(\+?420)? ?[1-9][0-9]{2} ?[0-9]{3} ?[0-9]{3}$/,'de-DE': /^(\+?49[ \.\-])?([\(]{1}[0-9]{1,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,'da-DK': /^(\+?45)?(\d{8})$/,'el-GR': /^(\+?30)?(69\d{8})$/,'en-AU': /^(\+?61|0)4\d{8}$/,'en-GB': /^(\+?44|0)7\d{9}$/,'en-HK': /^(\+?852\-?)?[569]\d{3}\-?\d{4}$/,'en-IN': /^(\+?91|0)?[789]\d{9}$/,'en-NZ': /^(\+?64|0)2\d{7,9}$/,'en-ZA': /^(\+?27|0)\d{9}$/,'en-ZM': /^(\+?26)?09[567]\d{7}$/,'es-ES': /^(\+?34)?(6\d{1}|7[1234])\d{7}$/,'fi-FI': /^(\+?358|0)\s?(4(0|1|2|4|5)?|50)\s?(\d\s?){4,8}\d$/,'fr-FR': /^(\+?33|0)[67]\d{8}$/,'he-IL': /^(\+972|0)([23489]|5[0248]|77)[1-9]\d{6}/,'hu-HU': /^(\+?36)(20|30|70)\d{7}$/,'it-IT': /^(\+?39)?\s?3\d{2} ?\d{6,7}$/,'ja-JP': /^(\+?81|0)\d{1,4}[ \-]?\d{1,4}[ \-]?\d{4}$/,'ms-MY': /^(\+?6?01){1}(([145]{1}(\-|\s)?\d{7,8})|([236789]{1}(\s|\-)?\d{7}))$/,'nb-NO': /^(\+?47)?[49]\d{7}$/,'nl-BE': /^(\+?32|0)4?\d{8}$/,'nn-NO': /^(\+?47)?[49]\d{7}$/,'pl-PL': /^(\+?48)? ?[5-8]\d ?\d{3} ?\d{2} ?\d{2}$/,'pt-BR': /^(\+?55|0)\-?[1-9]{2}\-?[2-9]{1}\d{3,4}\-?\d{4}$/,'pt-PT': /^(\+?351)?9[1236]\d{7}$/,'ru-RU': /^(\+?7|8)?9\d{9}$/,'sr-RS': /^(\+3816|06)[- \d]{5,9}$/,'tr-TR': /^(\+?90|0)?5\d{9}$/,'vi-VN': /^(\+?84|0)?((1(2([0-9])|6([2-9])|88|99))|(9((?!5)[0-9])))([0-9]{7})$/,'zh-CN': /^(\+?0?86\-?)?1[345789]\d{9}$/,'zh-TW': /^(\+?886\-?|0)?9\d{8}$/

国家/地区    语言代码 国家/地区 语言代码

简体中文(中国)    zh-cn   繁体中文(台湾地区)  zh-tw

繁体中文(香港)    zh-hk   英语(香港)  en-hk

英语(美国)  en-us   英语(英国)  en-gb

英语(全球)  en-ww   英语(加拿大) en-ca

英语(澳大利亚)    en-au   英语(爱尔兰) en-ie

英语(芬兰)  en-fi   芬兰语(芬兰) fi-fi

英语(丹麦)  en-dk   丹麦语(丹麦) da-dk

英语(以色列) en-il   希伯来语(以色列)   he-il

英语(南非)  en-za   英语(印度)  en-in

英语(挪威)  en-no   英语(新加坡) en-sg

英语(新西兰) en-nz   英语(印度尼西亚)   en-id

英语(菲律宾) en-ph   英语(泰国)  en-th

英语(马来西亚)    en-my   英语(阿拉伯) en-xa

韩文(韩国)  ko-kr   日语(日本)  ja-jp

荷兰语(荷兰) nl-nl   荷兰语(比利时)    nl-be

葡萄牙语(葡萄牙)   pt-pt   葡萄牙语(巴西)    pt-br

法语(法国)  fr-fr   法语(卢森堡) fr-lu

法语(瑞士)  fr-ch   法语(比利时) fr-be

法语(加拿大) fr-ca   西班牙语(拉丁美洲)  es-la

西班牙语(西班牙)   es-es   西班牙语(阿根廷)   es-ar

西班牙语(美国)    es-us   西班牙语(墨西哥)   es-mx

西班牙语(哥伦比亚)  es-co   西班牙语(波多黎各)  es-pr

德语(德国)  de-de   德语(奥地利) de-at

德语(瑞士)  de-ch   俄语(俄罗斯) ru-ru

意大利语(意大利)   it-it   希腊语(希腊) el-gr

挪威语(挪威) no-no   匈牙利语(匈牙利)   hu-hu

土耳其语(土耳其)   tr-tr   捷克语(捷克共和国)  cs-cz

斯洛文尼亚语  sl-sl   波兰语(波兰) pl-pl

瑞典语(瑞典) sv-se   西班牙语(智利)

页面如下:(包含代码,我这里以我国的手机号为例)

<template><div><div><h3 id="manager">员工信息表增加</h3><hr class="hr" /></div><div><el-form :model="emploinfo" :rules="rules" ref="emploinfo" label-width="100px" label-position="left" class="demo-ruleForm"><el-form-item :style="{'display':dis,'width':'100%'}" label="手机号码" prop="eitel"><el-input placeholder="请输入手机号码" v-model="emploinfo.eitel"></el-input></el-form-item></el-form></div></div>
</template><script>export default {data: function() {//验证手机号var checktel=(rule,value,cb)=>{var phones = /^(\+?0?86\-?)?1[345789]\d{9}$/if (phones.test(value)) {return cb();}return cb(new Error('请输入正确的联系电话'))};return {emploinfo: {eitel: null,},//验证规则rules: {eitel:[{required: true,message: "手机号码不能为空",trigger: ['blur','change']},{validator: checktel,trigger: ['blur','change']}]}};},methods: {this.$refs['emploinfo'].validate((valid) => {//触发表单验证if (valid) {}})},}};
</script><style>#manager {text-align: left;padding-left: 3%;}.hr {size: 1;border: 1px solid #606266;width: 98%;}.demo-ruleForm {margin-top: 5%;margin-left: 40%;width: 30%;}
</style>

 

  相关解决方案