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实现数据验证

标签：javascript

原文地址：http://blog.csdn.net/u010942465/article/details/45370917