vue中的正则表达式校验、验证

 更新时间:2023年06月08日 10:07:04   作者:String佳佳  
这篇文章主要介绍了vue中的正则表达式校验、验证方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue正则表达式校验、验证

1.el-form表单校验

  • el-form添加rules属性,基础用法见elementUI官网;
  • el-form添加rules属性,通过正则表达式自定义校验,用法如下:
        data() {
            let validatorTelAndMobile = function (rule, value, callback) {
              if (!value) {
                return callback(new Error('请输入联系电话'));
              }
              let isTel = /^(0\d{2,3}-){0,1}\d{6,8}$/.test(value);
              let isMobile = /^1[34578]\d{9}$/.test(value);
              if (isTel || isMobile) {
                callback();
              } else {
                callback(new Error('请输入正确的联系电话'));
              }
            }
            return {
                rules:{
                    telephone:[
                      {
                        validator: validatorTelAndMobile, required: true, trigger: ['blur', 'change']
                      }
                    ],
                }
            }
        }

el-form-item添加rules属性(行内校验),用法如下:

<el-form-item label="年龄:" prop="age" :rules="[{pattern: /^[0-9]*$/, message: '年龄只能为数字', trigger: 'blur'}]">
    <el-input v-model="user.age"></el-input>
</el-form-item>
 <el-form-item label="邮箱:" prop="email" :rules="{ required: true, message: '必须输入邮箱', trigger: 'blur'}">
     <el-input v-model="newJgInfoXZ.nsdz"></el-input>
</el-form-item>

2.纯el-input标签内校验

<el-input v-model="age"  oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>

3.正则表达式在代码中验证字符串

/^[0-9]+([.][0-9]{1,2})?$/.test(待验证的字符串或者数字)

4.一些常用的正则表达式

10-32位数字或字母:----------/^[a-zA-Z0-9]{10,32}$/     
手机号:---------------------/^1[34578]\d{9}$/          
座机号:---------------------/^(0\d{2,3}-){0,1}\d{7,8}$/    
整数:-----------------------/^[0-9]+$/          
不能包含中文:-----------------/^[^\u4e00-\u9fa5]+$/   
只能全是中文:-----------------/^[\u4e00-\u9fa5]+$/    
只能数字,且不能超过2位小数:--/^[0-9]+([.][0-9]{1,2})?$/     
15或18位身份证号:------------/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/    
士官证号,例如:军字第2001988号:----/^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/  
3至21位户口本号:------------------/^[a-zA-Z0-9]{3,21}$/     
15或者17或者18或者20位字母、数字组成:---/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/  
至少12个字符,其中需包含大小写字母,2位以上数字和2位以上符号-----/(?=.*?[A-Z].*?)(?=.*?[a-z].*?)(?=.*?[0-9].*?[0-9])(?=.*?[~!@#$%^&*()_+|<>,.?/:;'\[\]{}\"].*?[~!@#$%^&*()_+|<>,.?/:;'\[\]{}\"])^\S{12,}$/
邮箱:------------------------/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/    
2020/05/21格式日期:----------(/^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$/
正数 大于等于0的整数或者小数  >=0 float------/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
正数 大于0的整数或者小数  >0 float----------/^[+]{0,1}[1-9][0-9]*$|^[+]{0,1}(\d+\.\d+)$/
正整数 大于等于0的整数 >=0 int----------/^[+]{0,1}(\d+)$/
正整数 大于0的整数 >0 int--------------/^\+?[1-9][0-9]*$/
0-300整数------------------------/^[0-9]$|^[0-9]{2}$|^[1,2][0-9]{2}$|^[3][0][0]$/
长度至少5,必须包含数字和大小写(可以含特殊字符)-----/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{5,}$/
长度至少5,必须包含数字和大小写(不能含特殊字符)-----/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{5,}$/

vue判断是否是数字的正则表达式

判断是否是数字的正则表达式

var numReg = /^[0-9]*$/
var numRe = new RegExp(numReg)
if (!numRe.test(number)) {
  this.$message({
    type: 'warning',
    message: '请输入数字 ',
    duration: 10000,
    showClose: true,
  })
  return false
}

总结 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于vue2强制刷新,解决页面不会重新渲染的问题

    关于vue2强制刷新,解决页面不会重新渲染的问题

    今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue通过路由实现页面间参数的传递

    Vue通过路由实现页面间参数的传递

    这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue项目中解决数字精度丢失问题

    Vue项目中解决数字精度丢失问题

    我们知道,浮点类型的数据,在计算机中是以二进制的方式存储的,但是表示的数据也有个上限和下限,当超过限制 ,在计算机上显示只能取最接近的限值, 数字解析精度丢失说的就是这个现象,所以本文给大家介绍了Vue项目中解决数字精度丢失问题的解决,需要的朋友可以参考下
    2024-02-02
  • vue2.0的计算属性computed和watch的区别及各自使用场景解读

    vue2.0的计算属性computed和watch的区别及各自使用场景解读

    这篇文章主要介绍了vue2.0的计算属性computed和watch的区别及各自使用场景,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue如何使用watch监听指定数据的变化

    vue如何使用watch监听指定数据的变化

    这篇文章主要介绍了vue如何使用watch监听指定数据的变化,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 掌握Qwik.js,轻松应对前端SSR渲染问题

    掌握Qwik.js,轻松应对前端SSR渲染问题

    掌握Qwik.js,轻松应对前端SSR渲染问题!本指南将为你揭示如何使用这款强大的框架,让你在前端开发中游刃有余
    2023-12-12
  • vue调用swiper插件步骤教程(最易理解且详细)

    vue调用swiper插件步骤教程(最易理解且详细)

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue3 hook自动导入原理解析

    vue3 hook自动导入原理解析

    这篇文章主要介绍了vue3 hook自动导入的原理,介绍了API的自动导入及组件的自动导入,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue-amap根据地址回显地图并mark的操作

    vue-amap根据地址回显地图并mark的操作

    这篇文章主要介绍了vue-amap根据地址回显地图并mark的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue内置动态组件component使用示例小结

    vue内置动态组件component使用示例小结

    component是vue内置组件,主要作用为动态渲染组件,这篇文章主要介绍了vue内置动态组件component使用示例小结,需要的朋友可以参考下
    2024-03-03

最新评论