代码改变世界

一段个性 Url 验证的 html 部分

2012-06-02 19:01  音乐让我说  阅读(398)  评论(0)  编辑  收藏  举报

个性 Url 类似与博客园的自定义 Url 功能。

直接贴代码了：

<!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>
    <title>个性 Url 验证的示例</title>
    <style type="text/css">
        .redFont{ color:Red;}
        .greenFont{ color:Green;}
    </style>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CheckSpecialUrl()
        {
            var jSpecialUrlMsgObj = $("#specialUrlMsg");
            jSpecialUrlMsgObj.css("color", "black").html("");
            var specialUrlValue = $("#specialUrl").val();
            if (specialUrlValue.length == 0)
            {
                return;
            }
            var regexSpecialUrl = /^[a-zA-Z0-9][\w-_]{1,149}$/g;
            if (!regexSpecialUrl.test(specialUrlValue))
            {
                jSpecialUrlMsgObj.css("color", "red").html("个性 Url 错误，请看到“温馨提示”！");
                return;
            }
            var articleId = $("#hiddenArticleId").val();
            jSpecialUrlMsgObj.css("color", "red").html("正在检查个性 Url 是否有同名...");
            $.ajax({
                type : "GET",
                url: "/ws/newsWs.asmx/IsSpecialUrlExist",
                data: { articleId: articleId, specialUrl: specialUrlValue },
                success: function (data)
                {
                    if (data.success)
                    {
                        jSpecialUrlMsgObj.css("color", "green").html("恭喜您，该个性 Url 可用！");
                    }
                    else
                    {
                        jSpecialUrlMsgObj.css("color", "red").html("抱歉，该个性 Url 已经被使用过了，请换一个！");
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown)
                {
                    // 通常 textStatus 和 errorThrown 之中
                    // 只有一个会包含信息
                    // this; // 调用本次AJAX请求时传递的options参数
                    jSpecialUrlMsgObj.css("color", "red").html("Ajax 错误！");
                }
            });
        }
    </script>
</head>
<body>
<div>
    <h2>个性 Url 验证的示例</h2>
</div>
<br /><br />
<div>
    <!-- 这里隐藏一个文章ID，如果为空，则表示添加，否则为修改 -->
    <input id="hiddenArticleId" value="" type="hidden" />
    请输入个性 Url：<input type="text" id="specialUrl" maxlength="150" onblur="CheckSpecialUrl()" style="width: 500px" />
    <span id="specialUrlMsg"></span>
    <br /><br />
    <span style="font-size:12px; color:Gray;">温馨提示：个性 Url 只能包含英文字母、数字、减号（-）、下划线（_），并且以英文字母或数字开头，且最小长度为 2，最大为 150 个字符！</span>
    <br /><br />
    <input type="button" value="提交" onclick="CheckSpecialUrl();"/>
</div>
</body>
</html>

 

谢谢浏览！