JS VUE 正则校验

javascript 写法

	// 身份证
	if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value))
	
	// 手机号
	if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value))

	// 不是某一段固定字符 例如 123456
	if (/^((?!123456).)*$/.test(value))


	// 手机号遮挡
	phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")

	// 车牌号遮挡
	licenseNo.replace(/^([\u4e00-\u9fa5_a-zA-Z0-9\d]{3})[a-zA-Z0-9\d]{2}([a-zA-Z0-9\d]{2})$/, "$1**$2")

vue 写法

	<el-form
        :model="form"
        :rules="rules"
    >
    	<el-form-item
		    label="金额"
		    :prop="money"
		    :rules="[
			    { required: true, message: '请输入正确的金额' },	
			    {
					pattern: /^[+-]?((\d*(\.\d{1,2})$)|(\d{1,3}$))/,
				    message: '请输入正确的金额',
				},
				{ validator: ifFn, trigger: 'change' },
			]"
		></el-form-item>
	</el-form>

	data() {
	    // 限制最大最小值
	    let ifFn = (rule, value, callback) => {
	      if (value < 0.1) {
	        callback(new Error("请输入正确金额 : 0.1 ~ 100"));
	      } else {
	        callback();
	      }
	    };
	    
	    return {	
	    	money: 0,
	    	rules: {
				money:[
					//空判断
					{ required: true, message: '请输入正确的金额' },	
					//输入限制	
					{
						pattern: /^[+-]?((\d*(\.\d{1,2})$)|(\d{1,3}$))/,
						message: '请输入正确的金额',
					},
					//其他自定义判断	 ifFn:判断方法
					{ validator: ifFn, trigger: 'change' }
				]
			}		
	    }
	}	

正则替换，主动限制用户输入，根据前端设计理念，不应该限制用户操作，只能给予提示，看产品需求吧

		
	 <!-- 
	 
	      ↓ 限输入数字，最多两位小数 
	 	  οninput="value = value.replace(/^\D*([1-9]\d*\.?\d{0,2})?.*$/,'$1')"
	      ↓ 限输入整数 
	      οninput="value = value.replace(/[^\d]/g,'')" 
	      ↓ 限输入整数 且不允许为零 最大值限制 999
		  οninput="value = value.replace(/^0|[^\d]/g, '')
		  					  .replace(/^[1-9][0-9]{3,}/g,'999')"
	      ↓ 限输入整数 并且如果第一位是 0 ，则后面禁止输入任何数字
	      οninput="value = value.replace(/[^\d]/g, '')
	      					  .replace(/^0[\d]/g, '0')"
	      ↓ 限输入整数 并且如果第一位是 0 ，则之后输入任何数字都会替换为 空
	      οninput="value = value.replace(/[^\d]/g, '')
	      					  .replace(/^0[\d]/g, '')"
	      ↓ 限制输入1位小数，最高值100，最低值0.1，可以自己配置小数位数和最高值
	      οninput="value = value.replace(/^0[\d]/g, '0')
	      					  .replace(/^[1-9][0-9]{2,}/g,'100')"
	       					  .replace(/(\d{1,2}\.?\d{0,1})?.*/g,'$1')
	       					  

		  ↓ vue监听替换
		  @input="() => value = value.replace(/^0[\d]/g, '0').replace(/^[1-9][0-9]{4,}/g,'9999').replace(/(\d{1,3}\.?\d{0,2})?.*/g,'$1')"
		  
	 -->
	 
	 <el-input
	     v-model="money"
         oninput="value = value.replace(/^\D*([1-9]\d*\.?\d{0,2})?.*$/,'$1')"
     />

	 <el-input
	     v-model="money"
         @input="() => value = value.replace(/^\D*([1-9]\d*\.?\d{0,2})?.*$/,'$1')"
     />