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

来源：动视网责编：小OO 时间：2020-11-27 20:15:43

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

验证思路；监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false。实现代码。index.html。

推荐度：

点击下载本文 文档为doc格式

导读验证思路；监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false。实现代码。index.html。

下面小编就为大家带来一篇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;
}

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

推荐度：

点击下载本文 文档为doc格式

标签：验证实现 js

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐