高分求解，验证用户输入问题...

Question

如何实现类似这样的效果：搜狐注册页面就是光标离开输入框时，立即验证用户输入是否合适，合适就显示对号图片，不合适显示错号图片并给出提示信息...我知道结合 验证服务器控件 和 AJAX Control Toolkit控件 可以实现类似效果，但是似乎不能做到失去焦点后即时验证，需要点提交才能验证...可能是因为我某些地方设置不当...求高手给出解决方案，最好是用 AJAX Control Toolkit 实现，如果不能,请给出其他方案详细步骤，感激不尽！！！ps:AJAX Control Toolkit 安装的时候装一个 AjaxControlExtender.vsi 文件，不知道在别的地方运行是否也需要额外配置环境...有没有一劳永逸的办法？谢谢！

Answer 1

自己顶下，诚心求解，asp.net新手，各位多多指教！

Answer 2

如果你要验证某个ID或email是否被人注册了,就必须用ajax如果只是验证格式是否符合要求,譬如最多几个字,不能包含有什么字符.
直接用javascript就行了.处理onblur事件.

Answer 3

囧，问题是没学过javascript，所以只好在vs里拖控件，现学是来不及了，继续等解...

Answer 4

Pass.aspx<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Pass.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!--当前位置 开始-->
<div class="place">
     <div class="place_text">
         您所在的位置：<a href="index.aspx">首页</a> &gt;<span class="current">我要积分</span></div>
    </div>
    <!--当前位置 结束-->
<div class="uc">
      <h3 class="title">我要积分</h3>
  
  <div class="BsLoginMain">
         <table class="RegInfo"  border="0" cellspacing="10" cellpadding="0">
      <tr align="center">
        <td colspan="5" >&nbsp;</td>
        </tr>
      <tr>
     <td width="114" ></td>
     <td width="90" class="InfoKey">密码：</td>
     <td class="InfoValue"><input id="txtPass" type="password" /></td>
     <td class="MustCode">*</td>
     <td class="InfoTip">
   <span class="TipNormal">请您输入当前的登录密码</span><span class="TipError"></span></td>
   </tr>
   <tr>
     <td>&nbsp;</td>
     <td class="InfoKey">新密码：</td>
     <td class="InfoValue"><input id="txtNewPass" type="password" /></td>
     <td class="MustCode">&nbsp;</td>
     <td class="InfoTip red">
        <span class="TipNormal">
           请您输入新的密码</span><span class="TipError"></span>
 </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><span class="InfoKey">新密码确认：</span></td>
    <td><input  id="txtRePass" type="password" /></td>
    <td class="MustCode">&nbsp;</td>
    <td class="InfoTip red">
        <span class="TipNormal">
             请您确认一下新的密码</span><span class="TipError"></span>
        </td>
    </tr>
    </table> <div class="RegSubmit">
        <input name="按钮" type="button" class="submit_btn" id="BtnOK"  />
        </div>  </div>
  
</div>Pass.aspx[System.Web.Services.WebMethod]
    public static bool CheckPass(string strPass)
    {
        SystemBLL.User bll = new SystemBLL.User();
        if (bll.CheckPass(strPass))
        {
            return true;
        }
        else
        {
            return false;
        }
    }    [System.Web.Services.WebMethod]
    public static bool EditPass(string strPass)
    {
        SystemBLL.User bll = new SystemBLL.User();
        if (bll.UdtPass(strPass))
        {
            return true;
        }
        else
        {
            return false;
        }
    }Pass.js$(function() {
var txtPass = $("#txtPass");
var txtNewPass = $("#txtNewPass");
var txtRePass = $("#txtRePass");
var txtBtnOk = $("#BtnOK");function CheckState() {
    $(".TipNormal").show();
    $(".TipError").hide(); //默认设置
    return Valid_TbPass() & Valid_TbNewPass() & Valid_TbRePass();
}txtBtnOk.click(function() {
    if (CheckState()) {
        PageMethods.EditPass(txtNewPass.val(), function(result) {
        if (result) {
                alert("修改成功");
                location.href = "index.aspx";
            }
            else {
                location.href = "Err.aspx";
            }
        });    }});    /*----------------------------Blur事件----------------------------*/
txtPass.blur(Valid_TbPass);
txtNewPass.blur(Valid_TbNewPass);
txtRePass.blur(Valid_TbRePass);    function Valid_TbPass() {
        if (!txtPass.val()) {//检查用户是否为空
            txtPass.parents("tr").find(".TipNormal").hide();
            txtPass.parents("tr").find(".TipError").show().css("color", "red").html("<img src='image/icon_error.png'></img> 密码不能空");
            return false;
        }
        var TipError = txtPass.parents("tr").find(".TipError");
        txtPass.parents("tr").find(".TipNormal").hide();
        TipError.show().css("color", "green").text("正在查询...");
        PageMethods.CheckPass($(this).val(), function(result) {
        if (result) {
                TipError.show().css("color", "green").html("<img src='image/icon_right.png'></img>");
                return true;
            }
            else {
                TipError.show().css("color", "red").html("<img src='image/icon_forbid.png'></img>  密码错误");
                return false;
            }        });
        return true;    }    function Valid_TbNewPass() {
        if (!txtNewPass.val()) {
            txtNewPass.parents("tr").find(".TipNormal").hide();
            txtNewPass.parents("tr").find(".TipError").show().text("密码不能空");
            return false;
        }
        else {
            if (txtNewPass.val().length < 6) {
                txtNewPass.parents("tr").find(".TipNormal").hide();
                txtNewPass.parents("tr").find(".TipError").show().text("密码长度太短,请设置6位以上");
                return false;
            }
            txtNewPass.parents("tr").find(".TipNormal").show().text("");
            txtNewPass.parents("tr").find(".TipError").hide();
            return true;
        }    }    function Valid_TbRePass() {
        if (txtNewPass.val() != txtRePass.val()) {
            txtRePass.parents("tr").find(".TipNormal").hide();
            txtRePass.parents("tr").find(".TipError").show().text("密码不一致");
            return false;
        } else {
        txtRePass.parents("tr").find(".TipNormal").show().text("");
        txtRePass.parents("tr").find(".TipError").hide();
            return true;
        }
        return true;    }
    /*------------------检查合法性 End------------------------*/});
 
这是一个简单的例子，全部代码都贴出来了，希望你能看懂

Answer 5

但是似乎不能做到失去焦点后即时验证，需要点提交才能验证...ajax 的验证事件需要写在文本框失去焦点的事件中，可以用jq的ajax方法进行验证，轻量级的。个人建议最好不要用.net控件因为还得打包安装，很是麻烦。
<body>
    <form id="form1" runat="server">
    <div id="rbtneach" runat="server">
        <input name="valid" type="text" onblur="LostFocus()" />
    </div>
    </form>
    <script type="text/javascript">
        function LostFocus() {
            //alert("FocusLosted");
            //在这里写jq的ajax方法提交请求并验证
        }
    </script>
</body>

Answer 6

function check_user(id) {
  if (id == "")
  return;
  document.getElementById("userid_msg").innerHTML = "<img src='images/loading.gif' align='absMiddle'> 检查中，请稍候……";
  var url = "../RegistValidate.ashx?username=" + escape(id);
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = ShowResult;
  xmlHttp.send(null);
  }
  function ShowResult() {
  if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
  var s;
  s = xmlHttp.responseText;
  if (s== "OK")
  document.getElementById("userid_msg").innerHTML = "<img src='images/correct.gif' align='absMiddle'>";
  else
  document.getElementById("userid_msg").innerHTML = "<img src='images/error.gif' align='absMiddle'>";
    
  }
  else {
  document.getElementById("userid_msg").innerHTML = "<img src='images/error.gif' align='absMiddle'> 错误：" + xmlHttp.status;
  }
  }
    
  }

Answer 7

即使是新浪、搜狐也是用的这种方法。如果你觉得太麻烦，那还是继续用.net的验证控件吧，别多想了

Answer 8

哎，我以前和你一样，碰到简单的验证和无刷新，因为不会javascript就去动用AJAX，其实大可不必，我后来才发现学javascript到会简单的验证这种程度只需要不到1小时的时间。你还是学学吧，一劳永逸http://www.cnblogs.com/xxfss2/tag/JavaScript/
这里有两篇我写的关于javascript数据验证的文章，入门级的。

Answer 9

虽然我也是做asp.net的
但是我觉得只知道用MS的东西只会吧人越弄越傻
还是要知道原理的
JS是非学不可的

Answer 10

要想实现实时，必须用JS，涉及到服务器端判断，还得用AJAX

Answer 11

js效果挺好的，也不难学，尤其是jquery的效果很好的，建议你看下

Answer 12

看来js是必须的了，暂时只用验证控件把，js抽空学下，谢谢各位的帮助^_^

Answer 13

简单示例：Validate.aspx注册页面    ValidateServer.aspx数据处理页面
Validate.aspx没有后台代码  只有一个js函数<%--Validate.aspx页面--%>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validate.aspx.cs" Inherits="Ajax_Validate" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>文本框失去焦点就验证数据是否合法----Validate.aspx页面</title>
    <script type="text/javascript">
            
        function Validate() 
        {
            var user=document.getElementById("UserName").value;
            
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
            xmlRequest.onreadystatechange = function() {
                if (4 == xmlRequest.readystate) {
                    if (200 == xmlRequest.status) {                        var ps_Msg = xmlRequest.responseText;
                        
                        alert(ps_Msg);
                    }
                }
            }            xmlRequest.open("get", "../Ajax/ValidateServer.aspx?UserName=" + user + "&v=" + Math.random(), true);
            xmlRequest.send(null); 
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        用户：
        <input id="UserName" type="text"  onblur="Validate()"/>
    </div>
    <div>
        密码：
        <input id="PassWord" type="text" />
        
    </div>
    </form>
</body>
</html>
ValidateServer.aspx只有后台代码using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;public partial class Ajax_ValidateServer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string UserName = string.Empty;        if (Request.QueryString["UserName"] != null)
        {
            UserName = Request.QueryString["UserName"].ToString();
        }        try
        {
            string strSql = "Select Count(*) from Users where UserName = '" + UserName + "'";
            //执行Sql语句  如果>0  则此用户已存在；否则用户可注册
            using(SqlConnection cn = new SqlConnection("server=localhost;Initial Catalog=Test;uid=sa;pwd=sa"))
            {
                try
                {
                                        //执行Sql语句   这里只是测试一下
                    if (UserName == "zhang")
                    {
                        this.Response.Write("此用户已存在");
                    }
                    else
                    {
                        this.Response.Write("此账户可用");
                    }
                    
                }
                catch
                {
                    this.Response.Write("SQL执行出错");
                }
            }        }
        catch
        {
            this.Response.Write("错误");
        }   
        finally
        {
            this.Response.End();
        }    }
}

Answer 14

<script type="text/javascript">
            
        function Validate() 
        {
            var user=document.getElementById("UserName").value;
            
            xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
            xmlRequest.onreadystatechange = function() {
                if (4 == xmlRequest.readystate) {
                    if (200 == xmlRequest.status) {                        var ps_Msg = xmlRequest.responseText;
                        
                        alert(ps_Msg);
                    }
                }
            }            xmlRequest.open("get", "../Ajax/ValidateServer.aspx?UserName=" + user + "&v=" + Math.random(), true);
            xmlRequest.send(null); 
            //自己拷贝的时候注意  我这里是项目下建了个Ajax文件夹，下面有两个页面Validate.aspx和ValidateServer.aspx
            //如果没有Ajax文件夹的话  要去掉，直接是"../ValidateServer.aspx?UserName=" + user + "&v=" + Math.random()
        }
    </script>