JavaScript | 基础表单验证(纯Js)
2024-08-28 14:21:42
————————————————————————————————————————————
基础表单验证(纯js)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
验证思路
- 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
实现代码:
index.html
<!DOCTYPE html>
<html> <head>
<title></title>
<link rel="stylesheet" href="css.css">
</head> <body>
<form id="form" action="" method="post" onsubmit="return vilidate()">
<table class="table">
<tr>
<td>雇员编号</td>
<td>
<input type="text" id="empnb" name="empnb" onblur="validateEmpnb()">
</td>
<td>
<span id="empnbMsg"></span>
</td>
</tr>
<tr>
<td>雇员姓名</td>
<td>
<input type="text" id="ename" name="ename" onblur="validateEname()">
</td>
<td>
<span id="enameMsg"></span>
</td>
</tr>
<tr>
<td>雇员职位</td>
<td>
<input type="text" name="epost" id="epost" onblur="validateEpost()">
</td>
<td>
<span id="epostMsg"></span>
</td>
</tr>
<tr>
<td>雇员日期</td>
<td>
<input type="text" name="" id="edate" name="edate" onblur="validateEdate()">
</td>
<td>
<span id="edateMsg"></span>
</td>
</tr>
<tr>
<td>基本工资</td>
<td>
<input type="text" name="esalary" id="esalary" onblur="validateEsalary()">
</td>
<td>
<span id="esalaryMsg"></span>
</td>
</tr>
<tr>
<td>佣金</td>
<td>
<input type="text" name="ebrok" id="ebrok" onblur="validateEbrok()">
</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="./FormValidation.js"></script> </html>
FormValidation.js
// 日期选择
function layDate() { } // 验证雇员编号,4位纯数字编号
function validateEmpnb() {
return validateRegexp("empnb", /^\d{4}$/);
}
// 验证雇员姓名,不为空
function validateEname() {
return validateNull("ename");
}
// 验证雇员职位,不为空
function validateEpost() {
return validateNull("epost");
}
// 验证雇员日期
function validateEdate() {
return validateRegexp("edate", /^\d{4}-\d{2}-\d{2}$/)
}
// 验证基本工资
function validateEsalary() {
return validateRegexp("esalary", /^\d+(\.\d{1,2})?$/)
}
// 验证佣金
function validateEbrok() {
return validateRegexp("ebrok", /^\d+(\.\d{1,2})?$/)
} // 提交时全部重新验证
function validate() {
return validateEmpnb() && validateEname() && validateEpost() && validateEdate() && validateEsalary() && validateEbrok();
}
// 正则表达式验证
function validateRegexp(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 validateNull(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 solid;
} .table tr {
height: 2rem;
} .table td {
width: 15rem;
}
最新文章
- c/c++中关于sizeof、strlen的使用说明
- Lucene热词显示并选择
- selenium遇到readonly元素的输入
- adb shell 命令详解(转)
- set 赋值(转载)
- 【原】Storm学习资料推荐
- Block的引用循环问题 (ARC &; non-ARC)
- ASP.NET MVC5总结(二)@HTML扩展
- Android应用开发学习笔记之播放视频
- c# 接口实用
- python zip dict函数
- Springboot+ mybatis+ mysql配置@Slf4j
- 二:vlan,gre,vxlan
- 2018年JavaScript现状报告
- web font
- nopcommerce 4.1 学习2 -插件之挂件
- The superclass ";javax.servlet.http.HttpServlet"; was not found on the Java Build
- 2018.11.01 NOIP训练 树的排列(树形dp)
- 115道Java经典面试题(面中率最高、最全)
- git 不能拉取时,检查是不是被杀毒软件给干掉了
热门文章
- python 模拟登陆园子
- location.href、location.assign和location.replace的区别
- [thinkphp] 公共头部底部如何传递数据
- 如何在Android Studio中创建jniLib和asset文件夹 2
- 取消Gridvie中button的焦点
- [ARC100]E:Or Plus Max(FZT)
- 【AC自动机】【矩阵乘法】【等比数列】hdu2243 考研路茫茫——单词情结
- 通信编码解码 c11 实现 [ lua 专用版]
- Mac Screen Capture Shortcuts
- python可变的参数列表