效果图：

话不多说，请看代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title jquery提示语淡入/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' /link rel='样式表type=' text/CSS ' href=' '/style type=' text/CSS ' .tishi-com { display : none；宽度：65 px高度：20 px线高：20 px背景# fff9c9border:1px固体# c7bf93color: # 666位置：相对；left :230 pxtop :-22px；}/style脚本类型=' text/JavaScript ' src=' http : jquery-3。0 .0 .js '/script/head body div style=' width :500 px；高度：200 pxborder:1px实心# E5E 5；margin :0 auto ' div style=' height :50 px宽度：100%;" label class='user-label '用户名：/label input type=' text ' class=' username ' name=' username '/div class=' tishi-com ' span class=' tishi-font-12 '/span/div/div style=' height :50 px；宽度：100%;" label class='user-label '手机号：/标签输入类型=' text ' class=' phone ' name=' phone '/div class=' tishi-com ' span class=' tishi-font-12 '/span/div/div输入类型='submit' class='fade' value='提交//div/div脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $(')).淡出')。单击(function(){ var name=$ .修剪($(')。用户名')。val())；var phone=$ .修剪($(')。电话')。val())；if(name==' '){ $('输入[name=username]').兄弟姐妹('。tishi-com ').fadeIn()；$("输入[名称=用户名]")。兄弟姐妹('。tishi-com ').查找('。tishi-font ').文本('不能为空');} if(phone==' '){ $(' input[name=phone]').兄弟姐妹('。tishi-com ').fadeIn()；$(“输入[name=phone]”).兄弟姐妹('。tishi-com ').查找('。tishi-font ').文本('不能为空');} });});/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！