今天写了一个充值和查询的小演示，在期间遇到一个输入输入检测的错误，在这里分享给大家，希望能够帮助到需要的
html部分
<!DOCTYPE html>
<body>
<div class="main">
<div class="clearfix">
<span class="recharge_account" style="width: 50%">充值时长</span>
</div>
<div class="recharge_con js_recharge_con" style="margin-top: 20px">
<div class="recharge_txt">
<input type="text" placeholder="请输入手机号" id="userphone"><button class="search">查询</button>
</div>
</div>
<div class="recharge_con js_recharge_con" style="margin-top: 20px">
<div class="recharge_txt">
<input type="text" placeholder="请输入充值时长" id="addtimelong">
</div>
</div>
<span class="pay_confirm disabled" id="sureadd">确认充值</span>
</div>
<script src="./Public/pay/mb/js/jquery-1.11.1.min.js"></script>
</body>
</html>简单封装过后的js部分
(function(){
var Page={
canLogin:false,
serverUrl:"http://路由",
init:function(){
var _this=this;
_this.bindEvent()
_this.searchClick()
console.log("init")
},
addTime:function(){
var _this=this;
var myphone=$('#userphone').val()
var mytime=$('#addtimelong').val()
$.ajax({
type: 'put',
url: _this.serverUrl+"路由?phone="+myphone+"&remaintime="+mytime,
headers:{
Authorization:localStorage.getItem("basic")
},
dataType:"json",
success: function(resp)
{
console.log(resp)
var data=resp
console.log("resp",resp)
if(data.code==0){
$('#addtimelong').val('')
_this.canLogin=false;
alert("恭喜你，充值成功！")
$("#sureadd").css("background","#CAD3D7")
// location.reload()
}else{
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认号码");
}
},
error:function(error){
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认");
}
});
},
search:function(){
var _this=this;
var myphone=$('#userphone').val()
$.ajax({
type: 'get',
url: _this.serverUrl+"路由?phone="+myphone,
headers:{
Authorization:localStorage.getItem("basic"),
},
dataType:"json",
success: function(resp)
{
console.log(resp)
var data=resp
console.log("resp",resp)
if(data.code==0){
alert("该账户当前剩余时长为："+data.data.RemainTime+"分钟")
}else{
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认号码");
}
},
error:function(error){
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认");
}
});
},
bindEvent:function(){
var _this=this;
$("#sureadd").click(function(){
if(_this.canLogin){
_this.addTime()
}
})
$(".main input").on('input',function(){
if($("#userphone").val()&&$("#addtimelong").val()){
if(exe.test($("#userphone").val())){
$(".search").css("background","#14c864")
}else{
$(".search").css("background","#CAD3D7")
}
})
$(".search").on('click',function(){
if($(".search").css("background"）=="#14c864"){
}
})
if(exe.test($("#userphone").val())){
_this.canLogin=true;
$("#sureadd").css("background","#14c864")
$("#login_js_confirm.disabled")&&$("#login_js_confirm.disabled").removeClass("disabled")
}
else{
$('#addtimelong').val('')
alert("这不是一个手机号，请重新输入")
}
}else{
_this.canLogin=false;
if(!$("#login_js_confirm").hasClass("disabled")){
$("#login_js_confirm").addClass("disabled")
}
}
})
}
}
$(function(){
Page.init();
})
})(jQuery)由于$（“。main #userphone”）。on（'input'，function（）{}会监测所有输入框的输入，所以它的查询会在充值成功过后循环调用，然后就会不断的弹出余额显示。
开始我的解决方式是通过将充值完成后提交按钮变回不可选，将其的颜色改变为初始状态，再把这两者作为判断它查询余额的条件。后来经过测试发现不可行，原因在于我的的初始判断条件是输入框的输入。
后来想了半天想到的解决方式是单独再为查询列事件，条件单独设立为查询输入框的输入，并给查询设置一个可控变量，通过这个变量的变化来判断查询事件的可行性
(function(){
var Page={
canLogin:false,
cansearch:false,
serverUrl:"http://路由",
init:function(){
var _this=this;
_this.bindEvent()
_this.searchClick()
console.log("init")
},
addTime:function(){
var _this=this;
var myphone=$('#userphone').val()
var mytime=$('#addtimelong').val()
$.ajax({
type: 'put',
url: _this.serverUrl+"路由?phone="+myphone+"&remaintime="+mytime,
headers:{
Authorization:localStorage.getItem("basic")
},
dataType:"json",
success: function(resp)
{
console.log(resp)
var data=resp
console.log("resp",resp)
if(data.code==0){
$('#addtimelong').val('')
_this.canLogin=false;
alert("恭喜你，充值成功！")
$("#sureadd").css("background","#CAD3D7")
// location.reload()
}else{
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认号码");
}
},
error:function(error){
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认");
}
});
},
search:function(){
var _this=this;
var myphone=$('#userphone').val()
$.ajax({
type: 'get',
url: _this.serverUrl+"路由?phone="+myphone,
headers:{
Authorization:localStorage.getItem("basic"),
},
dataType:"json",
success: function(resp)
{
console.log(resp)
var data=resp
console.log("resp",resp)
if(data.code==0){
alert("该账户当前剩余时长为："+data.data.RemainTime+"分钟")
}else{
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认号码");
}
},
error:function(error){
$('#addtimelong').val('')
alert("该用户号码不存在. 请重新确认");
}
});
},
searchClick:function(){
var _this=this;
$(".main #userphone").on('input',function(){
var exe = /(^1[3|5|8|4|7][0-9]{9}$)/;
if(exe.test($("#userphone").val())){
_this.cansearch=true
$(".search").css("background","#14c864")
}else{
_this.cansearch=false
$(".search").css("background","#CAD3D7")
}
})
$(".search").on('click',function(){
if(_this.cansearch==true){
_this.search()
}else{
_this.cansearch=true
}
})
},
bindEvent:function(){
var _this=this;
$("#sureadd").click(function(){
if(_this.canLogin){
_this.addTime()
}
})
$(".main input").on('input',function(){
if($("#userphone").val()&&$("#addtimelong").val()){
if(exe.test($("#userphone").val())){
_this.canLogin=true;
$("#sureadd").css("background","#14c864")
$("#login_js_confirm.disabled")&&$("#login_js_confirm.disabled").removeClass("disabled")
}
else{
$('#addtimelong').val('')
alert("这不是一个手机号，请重新输入")
}
}else{
_this.canLogin=false;
if(!$("#login_js_confirm").hasClass("disabled")){
$("#login_js_confirm").addClass("disabled")
}
}
})
}
}
$(function(){
Page.init();
})
})(jQuery)这样写之后由于两个事件的条件独立，所以不论是充值前后，查询都不会有冲突了，所以要解决这类问题就得先理清事件触发的判断条件，再根据其条件做相应的处理。以上就是个人这次解决问题的部分心得，希望大家可以有用到的地方！