个人博客-Jquery 红色波浪线表单输入框为空输入验证

Jquery 红色波浪线表单输入框为空输入验证

作者：胡同里的砖头围观群众：1774 更新于：2013-12-19

未输入前红色边框，波浪底纹

输入后

JS代码：

$(document).ready(function()
{
    $("#Button1").click(function()
    {
        if($("#Text1").val()=="")
        {
            alert("请输入用户名");
            return;
        }
        else
        {
            $("#Text1").removeClass();
        }
    });
    
    $("#Text1").keyup(function()
    {
        if($(this).val()=="")
            $(this).addClass("Text1");
        else
            $(this).removeClass("Text1");
    })
})

前台页面：

<!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>无标题页</title>
    <script src="js/jquery-latest.min.js" type="text/javascript"></script>
    <link href="css/test1.css" rel="stylesheet" type="text/css" />
    <script src="js/test1.js" type="text/javascript"></script>
</head>
<body>
    <input id="Text1" type="text" class="Text1" />
    <input id="Button1" type="button" value="button" />
</body>
</html>

CSS代码：

.Text1{ border:solid 1px red; background:url(../Img/lang.jpg); background-position:bottom; background-repeat:repeat-x; }

实例下载：点击下载

本文标题： Jquery 红色波浪线表单输入框为空输入验证

文章分类：【JQuery/JavaScript】

非特殊说明，本文版权归【胡同里的砖头】个人博客所有，转载请注明出处.

留言评论

上一篇：firefox下如何添加firebug 调试工具附加组件

下一篇： JQuery 函数大全