利用原生JavaScript编写一个表单验证功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
如下所示：
<form action="" class="form_Box" id="formContainer"> <dl> <dt>英文字母：</dt> <dd><input type="text" id="verifyEn"><span></span></dd> <dd> <input type="submit" value="提交" class="btn submit"> <input type="reset" value="重置" class="btn reset"> </dd> </dl> </form>
var eFormContainer = document.getElementById('formContainer');
var eVerifyEn = document.getElementById('verifyEn');eFormContainer.addEventListener('submit',function(event){
});本实例要求当通过验证时，弹出提示通过验证；如果验证没有通过时，光标定位到文本框，并在文本框后显示验证失败的提示。接下来看下在提交事件函数中，具体怎么样做。
eFormContainer.addEventListener('submit',function(event){
var bPass = false;
var sPrompt = '';
var sValue = eVerifyEn.value;
});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;
}
});eFormContainer.addEventListener('submit',function(){
/* ... */
//声明正则，并判断字符串是否都是英文字母
let reg = /^[a-zA-Z]+$/;
bPass = reg.test(sValue);
});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();
}
});//在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();此时效果如图所示：
随后我们还需要完成数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码等。如果每一次验证都这么写的话，会很繁琐，而且代码也会比较多。所以需要封装一个字符串验证的函数，返回验证结果。在提交的时候再每一个文本框依次调用。
添加html元素如下：
<form action="" class="form_Box" id="formContainer"> <dl> <dt>英文字母：</dt> <dd><input type="text" id="verifyEn"><span></span></dd> <dt>英文和数字：</dt> <dd><input type="text" id="verifyEnNum"><span></span></dd> <dt>数字：</dt> <dd><input type="text" id="verifyNum"><span></span></dd> <dt>汉字：</dt> <dd><input type="text" id="verifyCn"><span></span></dd> <dt>日期：</dt> <dd><input type="text" id="verifyDate"><span></span></dd> <dt>邮箱：</dt> <dd><input type="text" id="verifyEmail"><span></span></dd> <dt>手机：</dt> <dd><input type="text" id="verifyPhone"><span></span></dd> <dt>密码：</dt> <dd><input type="password" id="verifyPwd"><span></span></dd> <dt>确认密码：</dt> <dd><input type="password" id="verifyForPwd"><span></span></dd> <dt></dt> <dd> <input type="submit" value="提交" class="btn submit"> <input type="reset" value="重置" class="btn reset"> </dd> </dl> </form>
// 获取表单元素
var eFormContainer = document.getElementById('formContainer');
// 获取验证字母文本框
var eVerifyEn = document.getElementById('verifyEn');
// 获取英文和数字文本框
var eVerifyEnNum = document.getElementById('verifyEnNum');
// 获取数字文本框
var eVerifyNum = document.getElementById('verifyNum');
// 获取汉字文本框
var eVerifyCn = document.getElementById('verifyCn');
// 获取日期文本框
var eVerifyDate = document.getElementById('verifyDate');
// 获取邮箱文本框
var eVerifyEmail = document.getElementById('verifyEmail');
// 获取手机文本框
var eVerifyPhone = document.getElementById('verifyPhone');
// 获取密码文本框
var eVerifyPwd = document.getElementById('verifyPwd');
// 获取确认密码文本框
var eVerifyForPwd = document.getElementById('verifyForPwd');function fnVerify(elem,reg,text){
//获取文本框输入的字符
var sValue = elem.value;
//获取文本框父元素
let eParent = elem.parentElement;
//获取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//判断文本框字符是否为空
if(sValue.trim()==''){
//光标定位到文本框
elem.focus();
//在文本框后显示提示文字
eSpan.innerHTML = text + '不能为空!';
//返回false
return false;
}
// 判断字符串是否符合规则
if(reg.test(sValue)){
//如果符合，返回true
return true;
}else{
//光标定位到文本框
elem.focus();
//在文本框后显示提示文字
eSpan.innerHTML = text + '格式不正确!';
//不符合则返回false
return false;
}
}eFormContainer.addEventListener('submit',function(event){
// 声明bPass变量，用于判断是否通过验证
var bPass = false;
//逐个验证文本框格式
bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'英文字母') &&
fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'英文和数字') &&
fnVerify(eVerifyNum,/^\d*$/,'数字') &&
fnVerify(eVerifyCn,/^[\u0391-\uFFE5]+$/,'汉字') &&
fnVerify(eVerifyDate,/^(\d{2}|\d{4})-\d{1,2}-\d{1,2}$/,'日期') &&
fnVerify(eVerifyEmail,/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,'邮箱') &&
fnVerify(eVerifyPhone,/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,'手机') &&
fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'密码');
//确认密码要与密码一致，单独加一个验证
if(eVerifyPwd.value !== eVerifyForPwd.value){
//获取确认密码父元素
let eParent = eVerifyForPwd.parentElement;
//获取提示span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//提示错误
eSpan.innerHTML = '确认密码要和密码保持一致';
//激活确认密码输入框
eVerifyForPwd.focus();
//阻止后续操作
bPass = false;
}
if(bPass){
//通过验证弹出提示
alert('通过验证');
event.preventDefault(); //实际工作不能有此行，在这里是为了阻止表单默认行为。
}else{
//阻止表单提交
event.preventDefault();
}
});还有一个问题需要解决，在文本框输入内容的时候，都应该删除后面的提示，不然输入正确还提示错误这不正常。
eFormContainer.addEventListener('input',function(event){
//获取当前文本框
let eInput = event.target;
//获取文本框父元素
let eParent = eInput.parentElement;
//获取存放提示的span元素
let eSpan = eParent.getElementsByTagName('span')[0];
//清空提示
eSpan.innerHTML = '';
});看完上述内容，你们掌握利用原生JavaScript编写一个表单验证功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
