自定义高级验证textbox

从现在开始，我每周坚持会写一篇原创技术博文。

 转载请必须注明来源 http://blog.csdn.net/learnJSee

首篇，就介绍用asp.net的继承System.Web.UI.WebControls.TextBox可做出许多实用功能强大的控件，

如TextBox、NumericTextBox、TrimTextBox

调用<cc1:TextBoxID="txtUserName"runat="server" CanBeNull="必填"Custom="checkuser"HintInfo="英文字母,数字, 短线和下划线组成"

></cc1:TextBox>

  Custom 后面带自己声明的js函数，如下例是使用异步判断是否同名用户

    function checkuser(oSrc, args) {

 

            var Str = document.getElementById("<% = txtUserName.ClientID%>").value;

            var regu = "^[0-9a-zA-Z\_-]+$";

            var re = new RegExp(regu);

 

            $.ajax({

                async: false, //同步，异步不行，在ajax为返回之前，函数就结束，提交IsValid的值了。

                type: "POST",

                url: "Manage/CustomValidatorHander.ashx",

                data: "type=checkuser&data=" + args.Value,

                success: function(msg) {

                    if (msg == "") {

 

                        if (re.test(Str)) {

 

                            document.getElementById('error').innerHTML ="<img src=\"images/true.gif\" />该登录用户可用！";

                        }

                        else {

                            args.IsValid = false;

                            document.getElementById('error').innerHTML ="<img src=\"images/false.gif\" />输入字符串是否只由英文字母,数字, 短线和下划线组成";

                        }

 

                    }

                    else {

 

                        document.getElementById('error').innerHTML ="<img src=\"images/false.gif\" /> " + msg;

                        args.IsValid = false;

                    }

                }

            });

        }

 

其中CanBeNull其是否启用必填判断，

相当于使用自带的验证控件

<asp:RequiredFieldValidatorID="RequiredFieldValidator3"runat="server"ErrorMessage="请如实填写真实姓名"                      ControlToValidate=" txtUserName ">

</asp:RequiredFieldValidator>

 

RequiredFieldType 属性是可验证的类型。如图

相关自己多次调用asp:RegularExpressionValidator再写正则表达式.

使用HintInfo 有点复杂，它需要有样式配合和加入另一个控件<cc1:HintID="Hint1"runat="server" />便可实现浮动提示窗，效果如图

 

<script language="javascript" src="../js/Control.js"></script>

<style>

        .messagetext

        {

            overflow: hidden;

            zoom: 1;

            border-left: 1px solid #000;

            border-right: 1px solid #000;

            padding: 0 10px;

            text-align: left;

            background: #ffffe1;

            word-break: break-all;

            letter-break: break-all;

        }

        .messagetext img

        {

            margin-right: 5px;

        }

   </style>

 

二、NumericTextBox

可控文本框内容仅能输入数字

有AllowDecimal属性设置是否带小数点。

三、TrimTextBox

自动去空格控件。

详细控件代码，下载地址为

 http://download.csdn.net/detail/learnjsee/4417736