vue 如何优雅的做表单验证

最新推荐文章于 2024-08-13 08:42:10 发布

@insist123

最新推荐文章于 2024-08-13 08:42:10 发布

阅读量582

点赞数 2

分类专栏：前端文章标签：手机号正则表达式验证规则 Vue 各国格式

本文链接：https://blog.csdn.net/weixin_44076260/article/details/109256218

版权

前端专栏收录该内容

10 篇文章 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>