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

ゝ一世哀愁。 2023-02-11 03:19 37阅读 0赞

## ps：正则表达式参考大全：[参考网址][Link 1] ##

## 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>

## 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,}$/

[Link 1]: https://www.cnblogs.com/yoyowin/p/12208917.html