jQuery实现手机号正则验证输入及自动填充空格功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现手机号正则验证输入及自动填充空格功能相关的知识，希望对你有一定的参考价值。
参考技术A 本文实例讲述了jQuery实现手机号正则验证输入及自动填充空格功能。分享给大家供大家参考，具体如下：先来看看运行效果（在删除时连删即可）：
具体代码：
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
</head>
<body>
<input
type="text"
id="inp">
<script
src="jquery-1.12.3.min.js"></script>
<script>
$(function()
$("#inp").keyup(function()
/*
手机号验证时：
var
pattern
=
/^1[3|4|5|7|8]\d1\s\d4\s\d4$/;
pattern.test(str);
*/
_self
=
$(this);
if(_self.val().length
==
3
||
_self.val().length
==
8)
var
str
=
_self.val()+"
";
_self.val(str);
);
);
</script>
</body>
</html>
PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
javascript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jquery实现一个一个输入的6位验证码，可回退删除
要实现的效果如下
思路：
通过label，让input获取焦点，让手机系统谈出键盘，
监听键盘事件，keyup，获取输入的值，即键盘的key值
校验元素，仅数字，或数字+字母都可以（正则根据情况来，本文章限定的是字幕+数组）
当点击删除或者回退键，删除最后输入的元素，这里根据label的索引来判断
上代码：直接复制html内容，运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title> </title>
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
@keyframes animate {
100% {
opacity: 0;
}
}
.container{
padding: 5%;
}
.vcode{
position: relative;
width: 100%;
overflow: hidden;
}
.code{
width: 100%;
padding: 0;
height: 0px;
font-size: 35px;
overflow: hidden;
border: none;
outline: none;
opacity: 0;
margin-left: -100%; /* ios上透明度为0时依然有光标 */
-webkit-tap-highlight-color: transparent;/*ios手机上input和lable都会出现点击有灰色背景闪动*/
}
/* 第一种样式 下划线 */
.labels{
display: flex;
display: -webkit-flex;
width: 100%;
height: 40px;
justify-content: space-between;
-webkit-justify-content: space-between;
margin-bottom: 40px;
-webkit-tap-highlight-color: transparent; /*防止ios手机上input和lable都会出现点击有灰色背景闪动*/
}
.label{
height: 34px;
line-height:34px;
width: 12%;
border-bottom: solid 2px #313131;
float: left;
color: #313131;
font-size: 20px;
text-align: center;
padding-bottom: 4px;
}
.labels2 .label{
height: 34px; line-height:34px;
width: 12%;
border: solid 1px #746f6f;
float: left;
color: #313131;
font-size: 20px;
text-align: center;
padding : 4px;
}
/* 模拟光标 */
.active:after{
content: ‘ ‘;
display: inline-block;
height: 100%;
width: 2px;
height:34px;
background: #ff8000;
animation: .8s animate linear infinite;
}
</style>
</head>
<body>
<div class="container">
<h2>输入验证码：</h2>
<div class="vcode" id=‘vertifycode‘>
<input type="text" maxlength=‘6‘ autofocus ref=‘code‘ class=‘code‘ id=‘code‘>
<!-- 第一种样式 底部横线 -->
<div class="labels">
<label class=‘label ‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
</div>
<!-- 第二种样式 方块 -->
<!-- <div class="labels labels2" >
<label class=‘label ‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
<label class=‘label‘ for="code"></label>
</div> -->
</div>
</body>
<script type="text/javascript">
$(function(){
// i 为label的索引下标
var i = 0;
$("#code").focus(function(){
if($(".labels .active").length==0){
$(".labels label:nth-child(1)").addClass("active");
}
})
$(‘input‘).keyup(function (event) {
var reg = /[A-Za-z0-9]/;
if(reg.test(event.key)){
$(".labels label").removeClass("active");
if(i<$(".labels label").length) {
//46删除键，8回退键
if(event.keyCode==46 || event.keyCode==8) {
i--;
i = i<0?0:i;
$("label:nth-child("+(i+1)+")").html("").addClass("active")
}else {
$("label:nth-child("+(i+1)+")").html(event.key)
$("label:nth-child("+(i+2)+")").addClass("active")
i++;
}
}else{
if(event.keyCode==46 || event.keyCode==8) {
i=$(".labels label").length-1;
$("label:nth-child("+(i+1)+")").html("").addClass("active")
}
}
}
})
});
</script>
</html>
-----参考原文：https://blog.csdn.net/dongguan_123/article/details/79961216------
以上是关于jQuery实现手机号正则验证输入及自动填充空格功能的主要内容，如果未能解决你的问题，请参考以下文章