共计 3920 个字符，预计需要花费 10 分钟才能阅读完成。
这篇文章将为大家详细讲解有关原生 js 制作表单验证的方法是什么，文章内容质量较高，因此丸趣 TV 小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
表单验证是 web 前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。
基本的表单验证包括如：字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。
现在就来完成这些验证代码的编写，先来看字母是怎么验证的。先编写需要的 html 代码，创建一个 id 为 formContainer 的表单元素，在里面加入需要验证英文字母的文本框和按钮，文本框后面需要一个 span 元素存放提示文字。如下所示：
form action= id= formContainer dl dt 英文字母：/dt dd input type= text id= verifyEn span /span /dd dd input type= submit value= 提交 input type= reset value= 重置 /dd /dl /form
开发的时候，一步一步分析功能再去实现，可以保持清晰的思路。
1. 获取表单元素及文本框元素，如下所示：
var eFormContainer = document.getElementById(formContainer var eVerifyEn = document.getElementById( verifyEn
2. 给表单元素绑定提交事件，用于点击提交按钮时，进行验证。
eFormContainer.addEventListener(submit ,function(event){ });
本实例要求当通过验证时，弹出提示通过验证；如果验证没有通过时，光标定位到文本框，并在文本框后显示验证失败的提示。接下来看下在提交事件函数中，具体怎么样做。
3. 先在函数中声明相关变量并获取文本框的值。bPass 变量用于判断是否可通过验证；sPrompt 变量是提示文字；sValue 变量是文本框的值。如下所示：
eFormContainer.addEventListener(submit ,function(event){ var bPass = false; var sPrompt = var sValue = eVerifyEn.value;});
4. 不允许文本框为空。判断 sValue 是不是空字符串，如果是则在文本框后显示提示，并且激活文本框，还需要阻止后续操作和默认行为，代码如下：
eFormContainer.addEventListener(submit ,function(){ /* ... */ if(sValue.trim()== ){ // 修改提示文字 sPrompt = 英文字母不能为空! // 光标定位到字母文本框 eVerifyEn.focus(); // 在文本框后显示提示文字 // 获取文本框父元素 let eParent = eVerifyEn.parentElement; // 获取存放提示的 span 元素 let eSpan = eParent.getElementsByTagName(span)[0]; // 在 span 元素中添加提示 eSpan.innerHTML = sPrompt; // 阻止表单提交 event.preventDefault(); // 阻止后续代码的执行 return; } });
5. 判断输入的值是否符合规则，即只有英文字母没有其他字符。在这里声明一个正则表达式，用于判断是否都是英文字母。如下所示：
eFormContainer.addEventListener(submit ,function(){ /* ... */ // 声明正则，并判断字符串是否都是英文字母 let reg = /^[a-zA-Z]+$/; bPass = reg.test(sValue); });
6. 根据正则判断结果，执行通过或阻止提交。
eFormContainer.addEventListener(submit ,function(){ /* ... */ if(bPass){ // 通过验证弹出提示 alert( 通过验证 }else{ // 修改提示文字 sPrompt = 只能输入英文字母! // 光标定位到字母文本框 eVerifyEn.focus(); // 在文本框后显示提示文字 // 获取文本框父元素 let eParent = eVerifyEn.parentElement; // 获取存放提示的 span 元素 let eSpan = eParent.getElementsByTagName(span)[0]; // 在 span 元素中添加提示 eSpan.innerHTML = sPrompt; // 阻止表单提交 event.preventDefault(); } });
7. 在文本框输入内容的时候，应该要删除后面的提示，如下所示：
// 在 eFormContainer 元素上绑定 input 事件，把所有文本框的 input 事件都委托给 eFormContainer 元素， // 这样做的好处就是不需要给每一个文本框都添加事件。 eFormContainer.addEventListener(input ,function(event){ // 获取当前文本框 let eInput = event.target; // 获取文本框父元素 let eParent = eInput.parentElement; // 获取存放提示的 span 元素 let eSpan = eParent.getElementsByTagName( span)[0]; // 清空提示 eSpan.innerHTML = });
此时的完整 javascript 代码如下：
function fnFormVerify(){ // 获取表单元素 var eFormContainer = document.getElementById( formContainer // 获取验证字母文本框 var eVerifyEn = document.getElementById( verifyEn // 给表单元素绑定提交事件 eFormContainer.addEventListener( submit ,function(){ // 声明 bPass 变量，用于判断是否通过验证 var bPass = false; // 声明 sPrompt 变量，用于提示文字 var sPrompt = // 获取字母文本框的值，保证其不等于空，再判断值中是否包含非英文字母，代码如下： var sValue = eVerifyEn.value; // 保证其不等于空 if(sValue.trim()== ){ // 修改提示文字 sPrompt = 英文字母不能为空! // 光标定位到字母文本框 eVerifyEn.focus(); // 在文本框后显示提示文字 // 获取文本框父元素 let eParent = eVerifyEn.parentElement; // 获取存放提示的 span 元素 let eSpan = eParent.getElementsByTagName(span)[0]; // 在 span 元素中添加提示 eSpan.innerHTML = sPrompt; // 阻止表单提交 event.preventDefault(); // 阻止后续代码的执行 return; } // 声明正则，并判断字符串是否都是英文字母 let reg = /^[a-zA-Z]+$/; bPass = reg.test(sValue); if(bPass){ // 通过验证弹出提示 alert( 通过验证 }else{ // 修改提示文字 sPrompt = 只能输入英文字母! // 光标定位到字母文本框 eVerifyEn.focus(); // 在文本框后显示提示文字 // 获取文本框父元素 let eParent = eVerifyEn.parentElement; // 获取存放提示的 span 元素 let eSpan = eParent.getElementsByTagName(span)[0]; // 在 span 元素中添加提示 eSpan.innerHTML = sPrompt; // 阻止表单提交 event.preventDefault(); } }); // 在 eFormContainer 元素上绑定 input 事件，把所有文本框的 input 事件都委托给 eFormContainer 元素， // 这样做的好处就是不需要给每一个文本框都添加事件。 eFormContainer.addEventListener(input ,function(event){ // 获取当前文本框 let eInput = event.target; // 获取文本框父元素 let eParent = eInput.parentElement; // 获取存放提示的 span 元素 let eSpan = eParent.getElementsByTagName( span)[0]; // 清空提示 eSpan.innerHTML = }); } fnFormVerify();
关于原生 js 制作表单验证的方法是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
