.net网站实训整理材料【三】

        今天要整理下内容，否则进度就上不去了……

        昨天我们主要介绍了以下注册界面的一些常用功能，应该说很多内容都是以前上课的时候提到过的，只是大家都忘记了。“无忌，刚才为师的太极还记得多少？”“一半吧”“无忌，现在呢？”“都忘了”“恩，可以出师了”。大家还是不能向无忌GG学习啊……

        注册的界面我们就不再做美化了，直接就用表格行列表示了，美工神马的一边去吧……放好该放的文字和界面之后我们首先要将控件命名，当然这步操作理论上不该再提及，大家应该已经养成习惯了。然后就是做验证。

        验证控件主要有：

        1、非空验证：验证必填项

        2、比较验证：验证两次输入的一致性（当然这个还可以验证其他的比较，如大于、小于、大于等于等等）

        3、正则验证：验证一些比较特殊的要求，如身份证、邮件地址、限定字符、长度等

        4、范围验证：这个暂时没用到

        5、自定义验证：这个需要自己写函数来验证，我们这里是用来做验证码验证的

        所有的验证控件必设的两个属性：验证谁（ControlToValidator）、错误信息（ErrorMessage），其他么像字体颜色（ForeColor）、是否一直显示（Display）等按情况自己选择用还是不用。有些特别的还需要额外设置一些属性，比方说比较验证除了设置验证谁，还要设置和谁比较，正则验证还要设置验证用的正则表达式，自定义验证要设置客户端验证函数名等等。多自学下……

        做好基本的注册界面后，我们首先要实现图片验证码功能，这里我们参考的代码是：http://blog.csdn.net/lisliefor/article/details/5563520

        在这个博文中，作者提供了两段代码，一个是使用代码，一个是实现代码。

        使用代码很简单，就是使用了img标记，然后主要是两个属性，一个是SRC，它指向生成图片的aspx页面地址；一个是onClick事件，这个可以不设，设置这个事件主要是为了点击后更改验证码。在这个onclick事件中，主要功能就是重新加载下这个图片的SRC，但是因为涉及到IE缓存，相同地址不会重新加载，所以在重新加载这个图片SRC的时候在地址后跟上？加时间，这样每次请求的页面地址都是不一样的，这样就不会从缓存中加载，而是每次都重新请求，这样就能获取新的验证码。

        至于这个图片验证码怎么实现，就需要看第二段代码。这段代码里我们需要做个修改，主要是namespace我们是不需要的，因为在同一个网站项目中，不用加上命名空间。然后要注意的是这段代码中的CLASS名称已经固定了，所以我们尽量建立于这个CLASS同名的文件，来复制这段代码上去，如果文件名不一样，那么我们需要修改aspx页面源代码中的第一行中的inherits属性值和cs页面代码中的CLASS名保持一致。

        在这段生成图片验证码的代码中，主要先生成了4位的随机码，然后将这个随机码存放到COOKIE中去，最后根据这4位随机码生成一张带有噪点（即干扰因素）的图片。

        这样我们就有真实可用的图片验证码了，同时图片中的随机码是放在一个名为CheckCode的COOKIE中的。那么接下来就是如何来判断我们在文本框中输入的验证码和COOKIE中的随机码是不是一致。

        这里需要用到的控件就是自定义验证控件（CustomValidator），首先设置该验证控件是验证谁的，验证谁啊？验证输入验证码的那个文本框，然后设置客户端验证函数（ClientValidationFunction），这个自定义一个函数名即可，因为是需要你自己实现的，假设我们这里设置为checkValid。那么这个函数写在哪，函数代码是什么呢？

        这个函数应该写在注册页面ASPX文件的源代码任何地方都OK，只是一般我们都把客户端JS脚本代码都放在HEAD内部。具体代码如下：

<script type="text/javascript">
        function checkValid(source, args) {        //该函数有两个参数，其中主要使用了args这个参数
            var tbCode = args.Value;               //args.Value获取到的是验证的文本框的输入值，也就是我们输入的验证码
            //这里思考下如何实现大小写不区分，提示：调用一个JS函数，将tbCode的值强制转换为大写。
            var cookieCode = document.cookie.substr(10, 4);
            //从document.cookie中获取到COOKIE的值，原值是CheckCode=XXXX，我们需要的是XXXX部分，所以做了个substr取子串
            //为什么前面是CheckCode=？因为前面我们提到过这个自动生成的随机码是放在一个名为CheckCode的COOKIE中
            if (tbCode == cookieCode) {
                args.IsValid = true;      //如果两者一致，那就表示验证通过了
            }
            else {
                args.IsValid = false;     //否则就是未通过，自动会显示自定义验证控件的错误信息
            }
        }
    </script>
           

          好了。这样我们就将注册的验证部分都实现了，大功基本告成。接下来我们额外做一个验证，这个不是验证输入格式，而是验证输入的身份证号是否被注册。我们的思路是：在身份证文本框中输入身份证，然后当我们点下一个文本框输入时，自动将输入的身份证到数据库中去做个查找，如果找到了则告诉用户这个身份证已被注册，如果没找到则可以继续。

          这个主要可以通过AJAX技术来实现，网上有很多代码，但是都是手写的，考虑到这个大家打代码的难度，所以我们就用控件来实现，在VS2010中的工具箱中，专门有个AJAX Extensions。里面我们需要用到的是ScriptManage和UpdatePanel这两个控件。首先在ASPX页面的最上面（按源代码来讲就是在body标记的form标记最头上）添加ScriptManage控件，然后在我们需要做验证的身份证这个文本框外围加上UpdatePanel控件，同时还要手动添加一个ContentTemplate节点，如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
                        <ContentTemplate>
                            <asp:TextBox ID="tbIDCard" runat="server" AutoPostBack="True" 
                                ontextchanged="tbIDCard_TextChanged"></asp:TextBox>
                            <asp:Label ID="lbMSG" runat="server" ForeColor="Red"></asp:Label>
                        </ContentTemplate>                   
                    </asp:UpdatePanel>
           

            外层是UpdatePanel，内层是ContentTemplate，最里面是一个文本框控件和一个Label控件，文本框控件是用来输入，Label控件是用来显示结果。其中要注意的是文本框控件需要添加一个属性和一个事件：属性就是AutoPostBack=“True”；事件就是OnTextChanged，这样当输完身份证，鼠标点下一个文本框的时候文本改变的这个事件就自动激活并运行该事件代码。而这个tbIDCard_TextChanged事件主要实现以下功能：

            1、获取文本框的值，

            2、到数据库查询有没有记录

            3、如果有则提示不能注册

            4、如果没有则不提示

            具体的代码今天还会继续讲解。

            除了以上必须的内容之外，还加了一个额外的效果，就是密码安全性验证，这个在前一篇博文中已经做了实例说明，这里就不多说了，相信大家都是能够实现的……

【未完待续】