客户端AJAX验证表单

简单的客户端验证用户名、密码、年龄、日期信息，提交表单时服务器还是要再验证的。

JS代码：

       function ajax(url) {
            xmlhttp = "";
            if (window.ActiveXObject) {//判定游览器，不同游览器声明对象不一样。
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            else {
                alert("请使用先进的游览器~");
                return false;
            }
            xmlhttp.open("post", url, false);//提交的数据
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) { //提交成功
                        valuetext = xmlhttp.responseText; //返回数据
                    }
                    else {
                        alert("请求错误");
                        return false;
                    }
                }
            }
            xmlhttp.send();//开始发送数据
            return valuetext;
        }
        function formblur() {
            var ul = document.getElementById("formul");
            var liinput = ul.getElementsByTagName("input"); //获取所有input
            var img = "<img src='images/true.gif' />";//验证成功图片地址
            for (i = 0; i < liinput.length; i++) {
                var input = liinput[i];
                //判定input类型
                if (input.type == "text" || input.type == "password") {
                    input.index = i;
                    input.onblur = function () {
                        var ul = document.getElementById("formul");
                        var li = ul.getElementsByTagName("li");
                        //index为遍历所有input的属性。
                        var span = li[this.index].getElementsByTagName("span");//li元素中的span
                        span[1].style.color = "red";
                        if (this.value != "") { //用户是否输入内容
                            span[1].innerHTML = img;//当前span显示图片
                            var num = this.index;
                            if (num == 0) { //验证用户名是否重复
                                if (ajax("form.ashx?name=" + this.value) == "success") {
                                    span[1].innerHTML = img;
                                }
                                else {
                                    span[1].innerHTML = "用户名已存在";
                                }
                            }
                            else if (num == 1) { //验证密码长度
                                if (this.value.length >= 6) {
                                    span[1].innerHTML = img;
                                }
                                else {
                                    span[1].innerHTML = "密码必须大于等于6位数";
                                }
                            }
                            else if (num == 2) { //验证年龄
                                if (!isNaN(this.value)) {
                                    if (this.value > 0 && this.value < 120) {
                                        span[1].innerHTML = img;
                                    }
                                    else {
                                        span[1].innerHTML = "年龄必须大于0";
                                    }
                                }
                                else {
                                    span[1].innerHTML = "年龄输入错误";
                                }
                            }
                            else if (num == 3) {
                                //验证日期，只是简单的判断，没有闰年和月份的具体日分。
                                var reg = /^[1,2][90]\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/ig;
                                if (reg.test(this.value)) {
                                    span[1].innerHTML = img;
                                }
                                else if (input.value != "") {
                                    span[1].style.color = "red";
                                    span[1].innerHTML = "出生日期错误或者格式错误,正确格式2012-10-10";
                                }
                                else {
                                    span[1].innerHTML = "请输入正确的信息";
                                }
                            }
                            else {
                                span[1].innerHTML = "请输入正确的信息";
                            }
                        }
                    }
                }
            }
        }

HTML代码：

<body onload="formblur()">
<form action="form.ashx">
    <ul id="formul">
    <li><span>用户名</span><input type="text" /><span></span></li>
     <li><span>密码</span><input type="password" /><span></span></li>
   <li><span>年龄</span><input type="text" /><span></span></li>
    <li><span>日期</span><input type="text" /><span></span></li>
        <li><input type="button" value="注册" /></li>
    </ul>
</form>
</body>

form.ashx 验证用户名代码：

  public void ProcessRequest(HttpContext context)
        {
            string name=context.Request["name"];
            if (name != null)
            {
                //强类型DateSet
                if (Convert.ToInt32(new _001TableAdapter().Getname(name).Rows.Count.ToString()) > 0)
                {
                    context.Response.Write("no");
                }
                else
                {
                    context.Response.Write("success");
                }
            }         
        }