vue-----正则表达式校验、验证

ps:正则表达式参考大全:参考网址

1、el-form表单校验:

  1. el-form添加rules属性,基础用法见elementUI官网;
  2. 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']
                      }
                    ],
            	}
            }
		}
  1. 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>

<el-input v-model="age"  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"></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})?$/     
1518位身份证号:------------/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/    
士官证号,例如:军字第2001988号:----/^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/  
321位户口本号:------------------/^[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,}$/
  • 10
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue正则表达式校验可以用于验证不同格式的数据,比如身份证号和邮箱。以下是一些常见的正则表达式校验方法: 1. 身份证号正则: `/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/`。这个正则表达式可以用于验证身份证号码是否符合规定的格式。 2. 邮箱正则: `/^[A-Za-z\d]([-_.][A-Za-z\d])*@([A-Za-z\d][-]){1,2}[A-Za-z\d]{2,5}$/g`。这个正则表达式可以用于验证邮箱地址是否符合规定的格式。 同时,你还可以使用Vue正则表达式校验方法来限制输入的内容。比如,如果你想只允许输入汉字、英文字母和数字,不允许输入空格和特殊符号,可以使用如下代码: ```javascript var name = this.name.replace(/[`~!#$%^&*()_/\- =<>?:"{}|~!#¥@%·—……&*()={}|《》?:“”【】、;‘’,。、\s ]/g, ''); ``` 以上代码中的正则表达式可以替换掉输入内容中的空格和特殊符号,只保留汉字、英文字母和数字。 综上所述,Vue正则表达式校验可以通过以上方法来验证不同格式的数据。你可以根据具体的需求选择合适的正则表达式来进行校验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue项目中常用的正则校验表达式](https://blog.csdn.net/weixin_46112225/article/details/116228796)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值