VUE表单验证及常用的JS正则表达式

    用户的一些表单操作,比如输入手机号登录,我们为了提高效率,可以先在前端做表单验证,保证用户输入符合要求,再向后台发送请求。

    表单验证主要有以下几个作用,

    1、校验用户输入是否为空,保证用户有输入信息,减少后台请求的失败率。

    2、校验用户输入是否符合我们的要求,比如这个表单输入只有满足某个数组中的元素之一才算合法,我们再向后台请求前进行校验,错误的话前端直接告知用户。

    3、校验用户输入是否符合格式要求,比如手机号、邮箱格式等等。这些就是通过正则表达式实现的。

    正则表达式,是用事先定义好的一些特定字符及其组合,组成一个规范字符来匹配字符串。如果只是偶尔用到,我们不需要特地花时间去全面学习,了解一些常用的JS正则表达式就可以。如果想要全面了解,推荐以下两个教程。

https://segmentfault.com/a/1190000002471140

https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143193331387014ccd1040c814dee8b2164bb4f064cff000

    我搜集总结了一些常用正则表达式。

    1、用户名(只能包含数字、字母、汉字和下划线,长度在3~18之间):^[\u4e00-\u9fff\w]{3,18}$

    2、手机号:^1\d{10}$

    3、邮箱:[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?或^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

    4、身份证号码:^((\d{18})|([0-9x]{18})|([0-9X]{18}))$

    5、域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

    6、IP地址:\d+\.\d+\.\d+\.\d+

    7、网址:[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

    8、国内号码:d{3}-d{8}|d{4}-d{7} 

    9、QQ号:[1-9][0-9]{4,}

    10、密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线):^[a-zA-Z]\w{5,17}$

    11、强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间):^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

    12、日期格式:^\d{4}-\d{1,2}-\d{1,2}

    13、一年的12个月:(01~09和1~12):^(0?[1-9]|1[0-2])$

    14、一个月的31天:(01~09和1~31):^((0?[1-9])|((1|2)[0-9])|30|31)$

    15、IPV4地址正则:^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$

    16、十六进制颜色:^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

    17、微信号(6至20位,以字母开头,字母,数字,减号,下划线):^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$

    18、车牌号:^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$

    19、xml文件:^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$

    20、港澳居民来往内地通行证号码:/^([A-Z]\d{6,10}(\(\w{1}\))?)$/

    我们在校验时可以使用RegExp的test()方法,检索字符串中是否符合正则表达式,返回值是true或false,根据返回值再进行下一步操作。

猜你喜欢

转载自blog.csdn.net/feiyu_may/article/details/81199277
今日推荐