JavaScript實現數據驗證
來源:程序員人生 發布時間:2015-05-15 08:09:54 閱讀次數:3546次
BS項目開發中,我們常常需要對數據進行判斷,在特定的場合,需要對輸入的字數進行限制,最近遇到了1個問題。
平時都是在后臺進行數據驗證,可是后臺驗證有1個肯定,就是反應比較慢,代碼以下。
if(txtCheckTest.Text.Count() >10)
{
modelState.AddModelError("ReadDescription","閱辦事項不能超過10個字!");}
效果以下:

最大的問題是,客戶在輸入進程中,其實其實不知道輸入了多少字,等到提交的時候發現輸入內容不符合要求,這樣,用戶體驗度不好。假設我們在用戶輸入進程中給予及時的提示,那末,就能夠很方便的將消息反饋給客戶,增加用戶體驗度。
前臺代碼以下:
<scriptlanguage="javascript" type="text/javascript">
//為文本框設置提示語
function SetPromptAndFormat(id, prefix,suffix, defaultValue) {
var inputCtrl = $("#" +id);
var formatPrompt = prefix +defaultValue + suffix;
if (inputCtrl.val().length < 1){
//inputCtrl.val(formatPrompt);
//inputCtrl.addClass("prompt");
}
inputCtrl.blur(function () {
if (inputCtrl.val().length <1) {
//inputCtrl.val(formatPrompt);
//inputCtrl.addClass("prompt");
} else {
inputCtrl.val(prefix +inputCtrl.val() + suffix);
}
});
inputCtrl.focus(function () {
if (inputCtrl.val() ==formatPrompt && inputCtrl.attr("class") =="prompt") {
inputCtrl.removeClass("prompt");
inputCtrl.val("");
} else {
var removeprefix =inputCtrl.val().substring(prefix.length, inputCtrl.val().length);
var removesuffix =removeprefix.substr(0, removeprefix.lastIndexOf(suffix));
inputCtrl.val(removesuffix);
}
});
}
$(document).ready(function() {
SetPromptAndFormat("Data_Title", "關于","的事項確認", "***");
SetTextareaMaxlength("Data_Title", 30);
SetTextareaMaxlength("Data_Abstract", 800);
SetTextareaMaxlength("Data_Explain", 100);
SetTextareaMaxlength("Data_Description", 300);
});
</script>
這樣寫的話,用戶在輸入數字超過限制時,將不能繼續輸入,可以最大限度的節儉客戶時間,提高體驗度。
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈