纯JavaScript实现基础表单验证的示例代码

来源：华拓科技网

下面小编就为大家带来一篇JavaScript 基础表单验证示例(纯Js实现)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

验证思路

监听每个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

css.css

html {
 font-size: 14px;
}

.table {
 border: 1px grey sopd;
}

.table tr {
 height: 2rem;
}

.table td {
 width: 15rem;
}