jquery价格输入的表单验证怎么做

最新推荐文章于 2024-09-09 13:04:36 发布

周行知

最新推荐文章于 2024-09-09 13:04:36 发布

阅读量713

点赞数

分类专栏：前端

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用jQuery和正则表达式实现价格输入框的表单验证，确保用户只能输入数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我最近在做项目时，有人问我怎么写价格输入框的表单验证，不会正则表达式，我的思路其实很简单，其实你无需会正则表达式，你只需知道正则表达式是干什么用得即可，下面我将介绍其做法，基本上照抄我的代码即可，因为价格的表单验证无非就是你输入是数字不是其他什么字母，如果要输入其他什么字母，你可以百度搜索一下，这种正则表达式的表示是什么样子拿过来用即可。

工具/原料

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>

<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>