<!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> <style type="text/css"> body { overflow-y: auto; overflow-x: hidden; } table.altrowstable { font-family: verdana,arial,sans-serif; font-size: 11px; color: #333333; border- 1px; border-color: #a9c6c9; border-collapse: collapse; } table.altrowstable th { border- 1px; padding: 8px; border-style: solid; border-color: #a9c6c9; text-align: center; } table.altrowstable td { border- 1px; padding: 10px; border-style: solid; border-color: #a9c6c9; font-family: "宋体"; text-align: center; } </style> <script type="text/javascript"> // #region 封装方法 // 初始化遮层提示 function initCover(formid) { var elements = document.forms[formid].elements, ele, vMsg; for (var i = 0, len = elements.length; i < len; i++) { ele = elements[i]; vMsg = ele.getAttribute("missingmessage"); addEvent(ele, "blur", (function (ele) { return function () { var val = ele.value, vMsg = ele.getAttribute("missingmessage"); if (typeof (vMsg) != "undefined") { if (ele.value == '') { ele.value = vMsg; ele.style.color = '#999' } } } })(ele)); addEvent(ele, "focus", (function (ele) { return function () { var val = ele.value, vMsg = ele.getAttribute("missingmessage"); if (typeof (vMsg) != "undefined") { if (ele.value == vMsg) { ele.value = ''; ele.style.color = ''; } } } })(ele)); if (!isNullOrEmpty(vMsg)) { // 遮层初始化显示 ele.value = vMsg; ele.style.color = '#999' } } } // 遮层校验 function coverValidation(formid) { var elements = document.forms[formid].elements, ele, vMsg, num; num = 0; for (var i = 0, len = elements.length; i < len; i++) { ele = elements[i]; var val = ele.value, vMsg = ele.getAttribute("missingmessage"); if (!isNullOrEmpty(vMsg)) { if (ele.value == vMsg) { ele.style.color = "red"; num++; } } } return num > 0 ? false : true; } // #endregion //给控件附加事件 function addEvent(ele, type, func) { window.attachEvent ? ele.attachEvent("on" + type, func) : ele.addEventListener(type, func); } // #region js对象是否为空 // 判断js对象是否为空 function isNullOrEmpty(obj) { if (obj != null && typeof obj != "undefined" && obj.length > 0) { return false; } else { return true; } } // 判断js对象是否可以聚焦 function isFocusable(ele) { if (ele.style.display == 'none') return false; if (ele.type == 'hidden') return false; if (!ele.style.visibility) return false; return true; } // #endregion window.onload = function () { // 初始化 initCover("formTest"); // 默认焦点 document.getElementById("submit").focus(); } </script> </head> <body> <form id="formTest" action=""> <table class="altrowstable" cellpadding="0" cellspacing="0" id="tbApply" style=" 95%;"> <tr> <th> <font color="red">*</font>标题： </th> <td> <input id="resTitle" type="text" name="resTitle" missingmessage="标题如：关于“XXXX“活动" style=" 720px;" value="" /> </td> </tr> <tr> <th> <font color="red">*</font>单位： </th> <td> <input id="resUnit" type="text" name="resUnit" title="单位" missingmessage="单位如：XXXX单位" value="" style=" 720px;" /> </td> </tr> <tr> <th> <font color="red">*</font>详细地址： </th> <td> <input id="resAddress" type="text" name="resAddress" title="详细地址" missingmessage="填写详细地址" style=" 720px;" value="" /> </td> </tr> </table> <div style="text-align: center; padding: 10px; 93%"> <br /> <input id="submit" type="button" value="提交申请" onclick="if(coverValidation('formTest')){alert('提交成功！');}" /> </div> </form> </body> </html>
以上代码可以直接放到html 页面直接运行