使用JavaScript进行客户端表单验证
JavaScript客户端表单验证
本文的目标是学习如何在JavaScript中执行表单验证。为了学习目的，我使用HTML、CSS和JavaScript设计了一个员工记录保留网站表单。所有表单验证逻辑都是使用JavaScript开发的。
以下是项目演示：
项目开发分为三个步骤：
- 编写HTML
- 添加CSS
- 编写JavaScript
编写HTML设计表单
<!--文件名：validations.html--><html> <head> </head><body> <br> <h2>员工记录保留系统</h2> <div class=”container”> <form id=”form” onsubmit=”validation()”> <div class=”title”><b>请输入值</b></div> <! — 名字输入框 → <div> <label for=”fname”>名字</label> <input type=”text” name=”fname” id=”fname” placeholder=”Vivek”/> <p id=”err1"></p> </div> <! — 姓氏输入框 → <div> <label for=”lname”>姓氏</label> <input type=”text” name=”lname” id=”lname” placeholder=”Chaudhary”/><p id=”err2"></p> </div> <! — 员工ID输入框 → <div> <label for=”eid”>员工ID</label> <input type=”text” name=”eid” id=”eid” placeholder=”1234"/> <p id=”err3"></p> </div> <! — 邮箱输入框 → <div> <label for=”email”>邮箱</label> <input type=”email” name=”email” id=”email” placeholder=”[email protected]”/> <p id=”err4"></p> </div> <! — 部门输入框 → <div> <label for=”did”>部门编号</label> <input type=”text” name=”did” id=”did” placeholder=”10"/> <p id=”err5"></p> </div> <br><br> <button id=”btn” type=”submit”>提交</button> </form> </div></body></html>此时表单的外观如下：
HTML部分完成。
添加CSS样式表单
CSS帮助我们为表单添加一些样式和效果，使其看起来更有吸引力。
<style> * { margin: .5; padding: .5; box-sizing: border-box;}body { font-family: sans-serif;}form { display: flex; flex-direction: column; justify-content: center; max-width: 400px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); padding: 50px;}input[type=”text”],input[type=”email”]{ width: 100%; border: 1px solid #333; box-sizing: border-box}label { display: block; margin-bottom: 5px;}input:invalid{ box-shadow:0 0 5px 1px red;}input:focus { border: 2px solid #f2796e;}form div input { width: 100%; height: 40px; border-radius: 8px; outline: none; border: 2px solid #c4c4c4; padding: 0 30px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);}form div { position: relative; margin-bottom: 15px;}input:focus { border: 2px solid #f2796e;}button { margin-top: 15px; width: 100%; height: 45px; background-color: #6e98f2; border: 2px solid #6e98f2; border-radius: 8px; color: #fff; font-size: 20px; cursor: pointer; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.1s ease;}.success-icon,.failure-icon { right: 0.5; opacity: 0.5;}button:hover { opacity: 0.7;}</style>在将CSS组件添加到我们的HTML对象之后，我们的表单看起来是这样的。
样式完成。
添加用于验证的JavaScript。
JavaScript帮助我们访问和修改DOM（数据对象模型）元素。为了更好地理解，我将JavaScript分成了几个部分。
通过ID访问HTML DOM元素：
let fname=document.getElementById(“fname”);let lname=document.getElementById(“lname”);let eid=document.getElementById(“eid”);let email=document.getElementById(“email”);let did=document.getElementById(“did”);let form=document.getElementById(“form”)let err1=document.getElementById(“err1”)let err2=document.getElementById(“err2”)let err3=document.getElementById(“err3”)let err4=document.getElementById(“err4”)let err5=document.getElementById(“err5”)let successIcon = document.getElementsByClassName(“success-icon”)let failureIcon = document.getElementsByClassName(“failure-icon”)let deptno=[10,20,30,40,50]let btn=document.getElementById("btn").typegetElementById()方法是HTML DOM中最常用的方法之一。它用于访问或修改HTML元素。
getElementByClassName()方法返回具有指定类名的元素集合。
我们使用这两种方法来访问表单组件以修改它们的行为。
为表单组件验证定义正则表达式
//用于名称验证的Javascript正则表达式var rName = /^[A-Za-z]+$/;//用于EmpID验证的Javascript正则表达式.var rEmpID=/\d{4}$/; //用于电子邮件验证的Javascript正则表达式.var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; //用于deptno验证的JS正则表达式var rDeptno = /^\d{2}$/;定义验证函数
//文件名是validation.jsfunction validation() { //名字验证 if (fname.value==”” || !fname.value.match(rName)){ err1.innerHTML=”*名字不能为空且必须为字符”; fname.style.border = “2px solid red”; } else { err1.innerHTML=””; fname.style.border = “2px solid green”; } //姓氏验证 if (lname.value==”” || !lname.value.match(rName)){ err2.innerHTML=”*姓氏不能为空且必须为字符”; lname.style.border = “2px solid red”; } else { err2.innerHTML=””; lname.style.border = “2px solid green”; } //电子邮件验证 console.log(“电子邮件地址是 “,email.value) if (email.value==”” && !rEmail.test(email.value)){ console.log(“在电子邮件if内部”) err4.innerHTML=”*电子邮件地址不能为空且必须有效，请遵循规则”; email.style.border = “2px solid red”; } else { err4.innerHTML=””; email.style.border = “2px solid green”; } //员工ID验证 if (eid.value==”” || !rEmpID.test(eid.value)){ err3.innerHTML=”*请输入以2个字符和6个数字开头的有效员工ID”; eid.style.border = “2px solid red”; } else { err3.innerHTML=””; eid.style.border = “2px solid green”; } //部门号验证 dept=Number(did.value) console.log(‘部门号的值 ‘,dept +” “+typeof(dept)) if (dept==”” || !rDeptno.test(dept)){ console.log(‘在if内部’) err5.innerHTML=”*部门号不能为空或非数字。请再次检查”; did.style.border = “2px solid red”; } else if(!dept==”” && !deptno.includes(dept)) { console.log(“输入的部门号为 “, did.value + “ “+typeof(did.value)) err5.innerHTML=”*部门号应为值列表[10,20,30,40]中的值。请再次检查”; did.style.border = “2px solid red”; } else if(!dept==”” && deptno.includes(dept)){ console.log(‘在第二个elif内部’) err5.innerHTML=””; did.style.border = “2px solid green”; }}form.addEventListener(btn,(event)=>{ event.preventDefault()});验证
- 姓名
let fname=document.getElementById(“fname”);let err1=document.getElementById("err1");// JavaScript Name验证的正则表达式var rName = /^[A-Za-z]+$/;//姓氏验证 if (fname.value=="" || !fname.value.match(rName)){ err1.innerHTML="*姓名不能为空且只能为字符"; fname.style.border = "2px solid red"; } else { err1.innerHTML=""; fname.style.border = "2px solid green"; }- 使用 document.getElementById(“fname”) 访问名字的文本输入项，同时使用 document.getElementById(“err1”) 访问错误标签
- 使用 rName = /^[A-Za-z]+$/ 定义了一个姓氏的正则表达式
- 接下来是一个 if-else 块，用于根据表单的情况进行比较和采取相应的操作。如果用户输入的姓氏为空或不符合正则表达式的规则，文本框将被标记为红色，并显示错误消息。
- 当用户输入的姓氏符合规则时，结果如下，文本框将被标记为绿色。
姓氏验证逻辑与名字验证相同。
2. 电子邮件
let email=document.getElementById(“email”);let err4=document.getElementById("err4");// JavaScript Email验证的正则表达式var rEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;//电子邮件验证 if (email.value=="" && !rEmail.test(email.value)){ err4.innerHTML="*电子邮件不能为空且必须有效。请遵循规则"; email.style.border = "2px solid red"; } else { err4.innerHTML=""; email.style.border = "2px solid green"; }- 使用 document.getElementById(“email”) 访问电子邮件的文本输入项，同时使用 document.getElementById(“err4”) 访问错误标签
- 如果用户输入的电子邮件为空或不符合正则表达式的规则，文本框将被标记为红色，并显示错误消息。
- 由于我们将文本输入字段定义为电子邮件类型，所以它期望包含“@”符号，否则将抛出以下错误：
- 当用户输入的电子邮件符合规则时，结果如下，文本框将被标记为绿色。
3. 部门编号
let did=document.getElementById(“did”);let err5=document.getElementById("err5")//部门值列表let deptno=[10,20,30,40,50]//部门编号验证 dept=Number(did.value) if (dept=="" || !rDeptno.test(dept)){ console.log('inside if') err5.innerHTML="*部门编号不能为空或非数字。请再次检查"; did.style.border = "2px solid red"; } else if(!dept=="" && !deptno.includes(dept)) { err5.innerHTML="*部门编号应该是值列表[10,20,30,40]中的一个，请再次检查"; did.style.border = "2px solid red"; } else if(!dept=="" && deptno.includes(dept)){ err5.innerHTML=""; did.style.border = "2px solid green"; }- 使用 document.getElementById(“did”) 访问文本类型的电子邮件表单输入项。同时使用 document.getElementById(“err5”) 访问错误标签。
- 如果用户输入的值不满足 if 条件，则会抛出错误，并将文本字段标记为红色。
- 如果用户输入的值不满足 else if 条件，则会抛出错误，并将文本字段标记为红色。
- 如果用户输入的值满足 else if 条件，则文本字段将被标记为绿色。
这就是用 JavaScript 编写的表单验证逻辑。
如果用户输入的所有输入都不正确的结果：
如果用户输入的所有输入都正确的结果：
本文的范围仅限于客户端验证。
摘要：
- 编写 HTML 来定义项目表单。
- 添加 CSS 来为 HTML 表单元素设计样式。
- 使用 JavaScript 处理客户端的表单验证。
