巧用weui.topTips驗(yàn)證數(shù)據(jù)的實(shí)例
更新時(shí)間：2017年04月17日 10:39:48 投稿：jingxian
下面小編就為大家?guī)?lái)一篇巧用weui.topTips驗(yàn)證數(shù)據(jù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
場(chǎng)景一、有一個(gè)輸入金額的場(chǎng)景，這個(gè)金額需要驗(yàn)證，驗(yàn)證說(shuō)明如下：
不能為空格；
不能為0；
不能為漢字；
不能為其它字符；
不能大于200；
唯一可以的是，只有輸入3~199之間的數(shù)字，下面的確定按鈕才會(huì)顯示，否則，隱藏這個(gè)按鈕。
HTML：
<!--醫(yī)生問(wèn)診金額-->
<div class="weui-jiaj-panel">
<div class="weui-jiaj-money-box dialog js_show">
<div class="weui-jiaj-money-box-btn">
</div>
<div class="weui-jiaj-money-box-three">
<div class="weui-flex__item">
<a id="showMoney" href="javascript:;" rel="external nofollow" class="weui-btn weui-btn_mini weui-btn_default">其它</a>
</div>
</div>
</div>
</div>
<!--其它金額-->
<div class="weui_dialog_alert" id="showMoneyDialog" style="display: none;">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"><strong class="weui_dialog_title">其它金額</strong></div>
<div class="weui_dialog_bd">
<div class="weui-jiaj-dialog-panel">
<div class="weui-cell">
<div class="weui-cell__bd">
<input id="dialogPrice" type="text" required class="weui-input" placeholder="￥10" />
</div>
</div>
</div>
</div>
<div class="weui_dialog_ft">
<div id="otherPriceBtn" class="weui_btn_dialog primary">確定</div>
</div>
</div>
</div>
JS：
<script>
//設(shè)置其它金額
var doctorPrices = [{
"doctorPrice": "5"
}, {
"doctorPrice": "10"
}, {
"doctorPrice": "15"
}, {
"doctorPrice": "20"
}, {
"doctorPrice": "30"
}, {
"doctorPrice": "60"
}];
var userId = $.cookie('doctorId');
$(function() {
selectedPrice();
});
var page = $('.page'); //頂層div
var panel = page.find('weui-jiaj-panel');
function selectedPrice() {
var $titleHtml = '';
for(var a = 0; a < doctorPrices.length; a++) {
var priceName = doctorPrices[a].doctorPrice;
//點(diǎn)周weui_btn_dialog隱藏
$titleHtml += '<button class="price_btn weui-btn weui-btn_mini weui-btn_warn"' + 'name=' + priceName + '>' + priceName + '</button>';
$('.price_btn').css('margin', '5px');
}
$('.weui-jiaj-money-box-btn').append($titleHtml);
//選擇金額
$('.price_btn').click(function() {
var titleValue = $(this).attr('name'); //$(this)表示獲取當(dāng)前被點(diǎn)擊元素的name值
var data = {
userId: userId,
price: titleValue
};
data = JSON.stringify(data);
$.ajax({
data: {},
dataType: 'json',
type: "post",
url: postDoctorPrice().replace("{userId}", userId).replace("{price}", titleValue),
contentType: 'application/json; charset=utf-8',
success: function(data) {
if(data && data.status == '200') {
weui.topTips('提交成功');
}
},
error: function(data) {
location.href = 'doctor_wode.html';
}
});
});
//其它金額
$('#otherPriceBtn').on('click', function(e) {
var otherPrice = $('#dialogPrice').val();
otherPrice = parseInt(otherPrice);
otherPrice = otherPrice.toString();
console.log("其它金額" + otherPrice);
var data = {
userId: userId,
price: otherPrice
};
data = JSON.stringify(data);
$.ajax({
data: {},
dataType: 'json',
type: "post",
url: postDoctorPrice().replace("{userId}", userId).replace("{price}", otherPrice), //post 時(shí)url帶參數(shù)
contentType: 'application/json; charset=utf-8',
success: function(data) {
if(data && data.status == '200') {
weui.topTips('設(shè)置成功！');
}
},
error: function(data) {
location.href = 'doctor_wode.html';
}
});
});
}
//驗(yàn)證
$('input').on('blur',function(){
var value = this.value;
var regChinese = new RegExp("[\\u4E00-\\u9FFF]+","g");
//字符串不能為空
if(value.length == 0) {
$('#otherPriceBtn').hide();
weui.topTips('不能為空');
//字符串是否為“空”字符即用戶輸入了空格
}else if(value.replace(/(^s*)|(s*$)/g, "").length ==0){
$('#otherPriceBtn').hide();
weui.topTips('不能為空');
//字符串是否為空或者全部都是空格
}else if(value == null){
$('#otherPriceBtn').hide();
weui.topTips('不能為null');
//字符串是否為漢字
}else if(regChinese.test(value)){
$('#otherPriceBtn').hide();
weui.topTips('不能輸入漢字');
//字符串不能為0
}else if(parseInt(value) == 0){
$('#otherPriceBtn').hide();
weui.topTips('不能為0');
//不能大于200
}else if(parseInt(value) > 200){
$('#otherPriceBtn').hide();
weui.topTips('自定義金額不能大于200元');
//自定義金額只能是數(shù)字
}else if(typeof(parseInt(value))){
$('#otherPriceBtn').show();
}
})
</script>
場(chǎng)景二、所有違反規(guī)距的都有信息提示，但是“確定”按鈕不隱藏，只是刪除它的click事件，只有符合條件的才可以跳轉(zhuǎn)
//驗(yàn)證
$('input').on('blur', function() {
var value = this.value;
var regChinese = new RegExp("[\\u4E00-\\u9FFF]+", "g"); //漢語(yǔ)
var specialSymbol =/[`~!@#$%^&*_+<>{}\/'[\]]/im; //特殊符號(hào)
//字符串不能為空
if(value.length == 0) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('不能為空，請(qǐng)重新輸入');
}, 500);
//字符串是否為“空”字符即用戶輸入了空格
} else if(value.replace(/(^s*)|(s*$)/g, "").length == 0) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('不能為空，請(qǐng)重新輸入');
}, 500);
//字符串是否為空或者全部都是空格
} else if(value == null) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('不能為空，請(qǐng)重新輸入');
}, 500);
//字符串是否為漢字
} else if(regChinese.test(value)) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('不能輸入漢字，請(qǐng)重新輸入');
}, 500);
//字符串不能為0
} else if(parseInt(value) == 0) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('不能為0，請(qǐng)重新輸入');
}, 500);
//小于3
} else if(parseInt(value) < 4) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('自定義金額不能小于3，請(qǐng)重新輸入');
}, 500);
//不能大于200
} else if(parseInt(value) > 200) {
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('自定義金額不能大于200，請(qǐng)重新輸入');
}, 500);
} else if(specialSymbol.test(value)){
//禁止輸入特殊字符
$('#otherPriceBtn').unbind('click');
setTimeout(function() {
$('.hide-description').css('display', 'block').text('不可輸入！@#￥%……&*特殊字符！');
}, 500);
//自定義金額只能是數(shù)字
} else if(typeof(parseInt(value))) {
setTimeout(function() {
$('.hide-description').css('display', 'block').text('你設(shè)置的金額為' + value);
}, 500);
//其它金額
$('#otherPriceBtn').on('click', function(e) {
var otherPrice = $('#dialogPrice').val();
otherPrice = parseInt(otherPrice);
otherPrice = otherPrice.toString();
console.log("其它金額" + otherPrice);
var data = {
userId: userId,
price: otherPrice
};
data = JSON.stringify(data);
$.ajax({
data: {},
dataType: 'json',
type: "post",
url: postDoctorPrice().replace("{userId}", userId).replace("{price}", otherPrice), //post 時(shí)url帶參數(shù)
contentType: 'application/json; charset=utf-8',
success: function(data) {
if(data && data.status == '200') {
weui.topTips('設(shè)置成功！');
}
},
error: function(data) {
location.href = 'doctor_wode.html';
}
});
});
}
})
以上這篇巧用weui.topTips驗(yàn)證數(shù)據(jù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
昨天閑著沒(méi)事，又因?yàn)楣ぷ餍枰瑢懥艘粋€(gè)腳本，用來(lái)做ftp。當(dāng)然不是直接做ftp，而是產(chǎn)生一個(gè)ftp的腳本，供ftp命令使用。2013-07-07
微信小程序自定義掃碼功能界面的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序自定義掃碼功能界面的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
對(duì)象無(wú)length屬性時(shí)IE6/IE7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike)
對(duì)象無(wú)length屬性時(shí)IE6/7中無(wú)法將其轉(zhuǎn)換成偽數(shù)組(ArrayLike) 的解決方法，需要的朋友可以參考下。2011-07-07
JavaScript中數(shù)組對(duì)象的那些自帶方法介紹
數(shù)組對(duì)象自帶方法想必大家都有所耳聞,今天主要為大家介紹下JavaScript中數(shù)組對(duì)象的那些自帶方法，感興趣的你可以參考下哈，希望可以幫助你學(xué)習(xí)javascript2013-03-03
js操作Xml(向服務(wù)器發(fā)送Xml,處理服務(wù)器返回的Xml)(IE下有效)
js操作Xml(向服務(wù)器發(fā)送Xml,處理服務(wù)器返回的Xml)(暫只IE下有效)2009-01-01
JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播過(guò)程解析
這篇文章主要介紹了JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播組件過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
Object.assign方法用于對(duì)象的合并，將源對(duì)象（ source ）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（ target ），下面這篇文章主要給大家介紹了關(guān)于ES6中新增的Object.assign()方法的相關(guān)資料，需要的朋友可以參考下。2017-09-09
這篇文章主要介紹了js中url對(duì)象化管理的相關(guān)知識(shí)以及用法介紹，有需要的朋友跟著小編一起學(xué)習(xí)下。2017-12-12
利用Three.js如何實(shí)現(xiàn)陰影效果實(shí)例代碼
使用three.js可以方便的讓我們?cè)诰W(wǎng)頁(yè)中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關(guān)于利用Three.js如何實(shí)現(xiàn)陰影效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-09-09
JS獲取input file絕對(duì)路徑的方法(推薦)
下面小編就為大家?guī)?lái)一篇JS獲取input file絕對(duì)路徑的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08