jquery价格输入的表单验证怎么做
1、第一步 引入jquery,并写入html和css
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="../../css/mui.min.css" />
<script src="../../js/jquery.js"></script><!--只关注此栏-->
<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />
<script type="text/javascript" src="../../js/mui.min.js"></script>
<style>
.pos_abs {
position: absolute;
bottom: 0px;
right: 0px;
}
.mui-aside {}
.search_condition {
list-style: none;
font-size: 0;
text-align: center;
}
.search_condition li {
display: inline-block;
vertical-align: middle;
width: 25%;
padding: 15px 0;
font-size: 14px;
line-height: 1;
border-bottom: 1px solid #dbdbdb;
}
.active{
color:#fe355c;
}
aside #box{
margin-top:30px;
width:70px;
height:30px;
line-height: 30px;
}
aside #box{
margin-top:30px;
width:70px;
height:30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="search_wrap pos_rel">
<input type="search" class="product_search" placeholder="请输入商品名称">
<span class="search_icon pos_abs">
<span class="iconfont icon-fangdajing"></span>
</span>
</div>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class=" mui-off-canvas-right mui-aside" id="offCanvasSide" style="background: #fff;">
<div id="offCanvasSideScroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容：只关注此栏 -->
<div class="aside_content">
<span>价格区间:</span><input type="text" id="box" />-<input type="text" id="box" />
</div>
</div>
</div>
</aside>
<!-- 主页面内容容器 -->
<div id="offCanvasContentScroll" class=" mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<ul class="search_condition">
<li class="condition_list active" data-type="all" data-sort="desc">综合排序</li>
<li class="condition_list" data-type="sel" data-sort="desc">销量优先</li>
<li class="condition_list updown_condition" data-type="pri" data-sort="asc">价格<span class="iconfont icon-paixu"></span></li>
<li id="offCanvasShow" class="condition_list filter_btn">筛选<span class="iconfont icon-shaixuan"></span></li>
</ul>
<!--</div>-->
</div>
</div>
</div>
<script>
$(function() {
//测滑容器的实现和原理
var offCanvasWrapper = mui('#offCanvasWrapper');
console.log(offCanvasWrapper);
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
console.log(offCanvasInner);
var offCanvasSide = document.getElementById("offCanvasSide");
//开启、关闭侧滑
mui(".mui-off-canvas-wrap").on("tap", "#offCanvasShow", function() {
offCanvasWrapper.offCanvas('close');
})
/* mui(".mui-off-canvas-wrap").on("tap", "#offCanvasHide", function() {
offCanvasWrapper.offCanvas('close');
})*/
});
</script>
</body>
</html>
2、第二步 你必须找一个只能输入数字的表达式
如下
/^\d+$/
3、第三步 你要在你要输入的输入框中加事件和上面正则
代码如下：
$("aside #box").on("input",function(){
//这句话的含义是input加一个input事件意思其实说你正在输入
console.log(!/^\d+$/.test($(this).val()));
//这句话意思是说你输入的值是不是是数字，如果不是输出为true
if(!/^\d+$/.test($(this).val())) {
//这句话意思是用来判断你输入的值是不是数字，
$(this).val($(this).val().replace(/[^\d]$/g, ""));
//这句话意思是用来判断你输入的值是不是数字，不是则你输入百度会替换为空
}
} )
整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" href="../../css/mui.min.css" />
<script src="../../js/jquery.js"></script>
<link rel="stylesheet" href="../../css/fontIcons/iconfont.css" />
<script type="text/javascript" src="../../js/mui.min.js"></script>
<style>
.pos_abs {
position: absolute;
bottom: 0px;
right: 0px;
}
.mui-aside {}
.search_condition {
list-style: none;
font-size: 0;
text-align: center;
}
.search_condition li {
display: inline-block;
vertical-align: middle;
width: 25%;
padding: 15px 0;
font-size: 14px;
line-height: 1;
border-bottom: 1px solid #dbdbdb;
}
.active{
color:#fe355c;
}
aside #box{
margin-top:30px;
width:70px;
height:30px;
line-height: 30px;
}
aside #box{
margin-top:30px;
width:70px;
height:30px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="search_wrap pos_rel">
<input type="search" class="product_search" placeholder="请输入商品名称">
<span class="search_icon pos_abs">
<span class="iconfont icon-fangdajing"></span>
</span>
</div>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class=" mui-off-canvas-right mui-aside" id="offCanvasSide" style="background: #fff;">
<div id="offCanvasSideScroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<div class="aside_content">
<span>价格区间:</span><input type="text" id="box" />-<input type="text" id="box" />
</div>
</div>
</div>
</aside>
<!-- 主页面内容容器 -->
<div id="offCanvasContentScroll" class=" mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<ul class="search_condition">
<li class="condition_list active" data-type="all" data-sort="desc">综合排序</li>
<li class="condition_list" data-type="sel" data-sort="desc">销量优先</li>
<li class="condition_list updown_condition" data-type="pri" data-sort="asc">价格<span class="iconfont icon-paixu"></span></li>
<li id="offCanvasShow" class="condition_list filter_btn">筛选<span class="iconfont icon-shaixuan"></span></li>
</ul>
</div>
</div>
</div>
<script>
$(function() {
$("aside #box").on("input",function(){
console.log(!/^\d+$/.test($(this).val()));
if(!/^\d+$/.test($(this).val())) {
$(this).val($(this).val().replace(/[^\d]$/g, ""));
}
} )
//测滑容器的实现和原理
var offCanvasWrapper = mui('#offCanvasWrapper');
console.log(offCanvasWrapper);
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
console.log(offCanvasInner);
var offCanvasSide = document.getElementById("offCanvasSide");
//开启、关闭侧滑
mui(".mui-off-canvas-wrap").on("tap", "#offCanvasShow", function() {
offCanvasWrapper.offCanvas('close');
})
/* mui(".mui-off-canvas-wrap").on("tap", "#offCanvasHide", function() {
offCanvasWrapper.offCanvas('close');
})*/
});
</script>
</body>
</html>