验证思路
监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false
实现代码：
index.html
<!doctype html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollow" > </head> <body> <form id="form" action="" method="post" onsubmit="return vipdate()"> <table class="table"> <tr> <td>雇员编号</td> <td> <input type="text" id="empnb" name="empnb" onblur="vapdateempnb()"> </td> <td> <span id="empnbmsg"></span> </td> </tr> <tr> <td>雇员姓名</td> <td> <input type="text" id="ename" name="ename" onblur="vapdateename()"> </td> <td> <span id="enamemsg"></span> </td> </tr> <tr> <td>雇员职位</td> <td> <input type="text" name="epost" id="epost" onblur="vapdateepost()"> </td> <td> <span id="epostmsg"></span> </td> </tr> <tr> <td>雇员日期</td> <td> <input type="text" name="" id="edate" name="edate" onblur="vapdateedate()"> </td> <td> <span id="edatemsg"></span> </td> </tr> <tr> <td>基本工资</td> <td> <input type="text" name="esalary" id="esalary" onblur="vapdateesalary()"> </td> <td> <span id="esalarymsg"></span> </td> </tr> <tr> <td>佣金</td> <td> <input type="text" name="ebrok" id="ebrok" onblur="vapdateebrok()"> </td> <td> <span id="ebrokmsg"></span> </td> </tr> <tr> <td colspan="3"> <input type="submit" autofocus="autofocus"> <input type="reset"> </td> </tr> </table> </form> </body> <script type="text/javascript" src="./formvapdation.js"></script> </html>
formvapdation.js
// 日期选择 function laydate() { } // 验证雇员编号,4位纯数字编号 function vapdateempnb() { return vapdateregexp("empnb", /^\d{4}$/); } // 验证雇员姓名,不为空 function vapdateename() { return vapdatenull("ename"); } // 验证雇员职位,不为空 function vapdateepost() { return vapdatenull("epost"); } // 验证雇员日期 function vapdateedate() { return vapdateregexp("edate", /^\d{4}-\d{2}-\d{2}$/) } // 验证基本工资 function vapdateesalary() { return vapdateregexp("esalary", /^\d+(\.\d{1,2})?$/) } // 验证佣金 function vapdateebrok() { return vapdateregexp("ebrok", /^\d+(\.\d{1,2})?$/) } // 提交时全部重新验证 function vapdate() { return vapdateempnb() && vapdateename() && vapdateepost() && vapdateedate() && vapdateesalary() && vapdateebrok(); } // 正则表达式验证 function vapdateregexp(elemname, regexp) { var elem = document.getelementbyid(elemname); var msg = document.getelementbyid(elemname + 'msg') console.log(regexp); console.log(elem.value); if (regexp.test(elem.value)) { msg.innerhtml = 'ok'; msg.style.color = 'green'; return true; } else { msg.innerhtml = '您的输入不符合规则'; msg.style.color = 'red'; return false; } } // 不为空验证 function vapdatenull(elemname) { var elem = document.getelementbyid(elemname); var msg = document.getelementbyid(elemname + 'msg'); console.log(elem.value); console.log(msg); if (elem.value == '' || elem.value == ' ') { msg.innerhtml = '您的输入不能为空'; msg.style.color = 'red'; return false; } else { msg.innerhtml = 'ok'; msg.style.color = 'green'; return true; } }
css.css
html { font-size: 14px; } .table { border: 1px grey sopd; } .table tr { height: 2rem; } .table td { width: 15rem; }
以上就是纯javascript实现基础表单验证的示例代码的详细内容。