ajax盡態驗證

最新推荐文章于 2020-08-31 17:23:14 发布

jackeyabc

最新推荐文章于 2020-08-31 17:23:14 发布

阅读量470

点赞数

CC 4.0 BY-SA版权

文章标签： ajax xmlhttprequest function callback validation html

本文链接：https://blog.youkuaiyun.com/jackeyabc/article/details/2052936

本文介绍了一个使用Ajax技术实现实时表单验证的例子。通过客户端JavaScript调用服务器端的方法，实现对输入日期的有效性检查，并即时反馈结果给用户。此方法提高了用户体验并减少了不必要的服务器负载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

test.aspx

===================================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="NewsAdd" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
    <title>Using Ajax for validation</title>
    <script type="text/javascript">
        var xmlHttp;
        function createXMLHttpRequest()
        {
            if (window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }

        }
        function validate()
        {
            createXMLHttpRequest();
            var date = document.getElementById("birthDate");
            var url = "getdata.aspx?id=" + escape(date.value);
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = callback;
            xmlHttp.send(null);

                }
        function callback()
        {
            if (xmlHttp.readyState == 4)
            {


                if (xmlHttp.status == 200)
                {

                     var messageArea = document.getElementById("dateMessage");
                     messageArea.innerHTML=xmlHttp.responseText;
                    setMessage(mes, val);
                }
            }
        }
        function setMessage(message, isValid)
        {
            var messageArea = document.getElementById("dateMessage");
            var fontColor = "red";
            if (isValid == "true")
            {
                fontColor = "green";
            }
            messageArea.innerHTML = "<font color=" + fontColor + ">" + message + " </font>";

        }
        function show()
        {
           var m = document.getElementById("dateMessage");
        alert(m.innerText);
        }
    </script>
</head>
<body>
    <h1>Ajax Validation Example</h1>
    Birth date: <input type="text" size="10" id="birthDate" onchange="validate();"/><label id="dateMessage" style="font-size:x-small"></label>

</body>

</html>