正则验证 手机号 Vue/Js 心得

html

//vue
<input v-model="num1"> //手机
<input v-model="num12">//整数


//原生
 <input class="telephone" id="telephone" type="text" />
 <input class="integer" id="integer" type="text"  />

js

Vue
export default {
  data() {
    return {
      show: false,
      num1: "",
      num2: ""
    };
  },
 methods:{
 	add(){
 		if(!/^1[345789]\d{9}/.test(this.num1)){
 			console.log('请输入正确的手机号哦！')
		}else{
			console.log('正确！')
		}
		if(!/^|[1-9]\d*$/.test(this.num2)){
			console.log('错误！')
			//开头不能输零。小数，符号可以输入
		}
	}
}

》》》》》》》》》》》》》》无情分割线》》》》》》》》》》》》》》》》》》

Js
<script>
var input1 = document.getElementById("telephone");
var input2 = document.getElementById("integer");

if(!/^1[345789]\d{9}/.test(input1.value )){
 		console.log('请输入正确的手机号哦！')
	}else{
		console.log('正确！')
	}	
	if(!/^|[1-9]\d*$/.test(input1.value )){
		console.log('错误！')
		//开头不能输零。小数，符号可以输入
	}
</script>

看完感觉是不是觉得没啥区别，没错就是没啥区别。。。。。
js获取input的value时有坑哦，慎踩！

css

 input{
      width: 74%;
      height: 30px;
      border: 1px solid #f1f1f1;
  }

没有最好的方案只有最合适的方案。
根据自身情况进行更改。

正则菜鸟教程

以上。。。。。。