JavaScript實現資料驗證

標籤：javascript

BS項目開發中，我們經常需要對資料進行判斷，在特定的場合，需要對輸入的字數進行限制，最近遇到了一個問題。

         平時都是在後台進行資料驗證，可是後台驗證有一個確定，就是反應比較慢，代碼如下。

 

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>

這樣寫的話，使用者在輸入數字超過限制時，將不能繼續輸入，可以最大限度的節約客戶時間，提高體驗度。

JavaScript實現資料驗證