未输入前红色边框,波浪底纹
输入后
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 函数大全