程序员人生 网站导航

JavaScript实现数据验证

栏目:htmlcss时间:2015-05-15 08:09:54

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>


这样写的话,用户在输入数字超过限制时,将不能继续输入,可以最大限度的节俭客户时间,提高体验度。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐