菜鸟,自己花了一晚上写的,效果是输入手机时自动添加空格,方便用户确认手机,有什么不对的大家多多指教
写了两个效果,第一个是输入时添加空格,第二个是手机号码合法时用正则截取输出
<form action="" id="form">
<p class="output"></p>
<input type="text" id="user" name="username" placeholder="请输入11位手机号码" maxlength="13">
</form>
<script type="text/javascript">
var form=document.getElementById('form');
var input=form.elements[0];
var output=document.getElementsByClassName('output')[0];
input.onkeyup=function (e) {
var value=this.value.replace(/[^\d\s]/g,'');//匹配数字
this.value=value.replace(/(^\s*)(\s*$)/g,'');//去除前后空格
var parent=/^(1314151718)([0-9\s]{11})/.test(this.value);
if (this.value.length == 3 && e.keyCode != 8) { // 8 退格键键码 如果不监控退格键键码,用户输入错误时,按退格键退到第8位时会自动添加空格,会导致不能退格
this.value=this.value+' ';
}else if (this.value.length == 8 && e.keyCode !=8) {
this.value=this.value+' ';
}else if (parent) {
output.innerHTML='输入正确';
output.style.color='green';
}else if(!parent && this.value.length >= 13){
output.innerHTML='手机号码格式错误';
output.style.color='red';
}else{
output.innerHTML='';
}
}
input.onblur=function () {
var value=parseInt(this.value.replace(/\s/g,''));
alert(typeof value+' '+value);
}
//格式正确用正则截取输出
/*
input.onkeyup=function () {
this.value=this.value.replace(/[^\d]/g,'');
var parent=/^(1314151718)([0-9]{9})$/.test(this.value);
if (parent) {
output.innerHTML='输入正确';
output.style.color='green';
this.value=this.value.replace(/^(.{3})(.{4})$/g,'$1 $2');
}else if (this.value.length >=11 && !parent) {
output.innerHTML='手机号码格式错误';
output.style.color='red';
}
}
input.onblur=function () {
var value=parseInt(this.value.replace(/\s/g,''));
alert(typeof value+' '+value);
}*/
</script>
热门评论
格式正确用正则截取输出好像程序有错