爱站程序员基地表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。
基本的表单验证包括如：字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。
现在就来完成这些验证代码的编写，先来看字母是怎么验证的。先编写需要的html代码，创建一个id为formContainer的表单元素，在里面加入需要验证英文字母的文本框和按钮，文本框后面需要一个span元素存放提示文字。如下所示：
<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>
开发的时候，一步一步分析功能再去实现，可以保持清晰的思路。
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();
此时效果如图所示：
随后我们还需要完成数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码等。如果每一次验证都这么写的话，会很繁琐，而且代码也会比较多。所以需要封装一个字符串验证的函数，返回验证结果。在提交的时候再每一个文本框依次调用。
添加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>
再修改js代码：
1. 获取表单元素和所有文本框，如下所示：
// 获取表单元素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\');
2.封装一个验证函数，传入三个参数：elem为文本框元素，reg为正则表达式，text为提示关键字。如下所示：
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 + \'不能为空!\';//返回falsereturn false;}// 判断字符串是否符合规则if(reg.test(sValue)){//如果符合，返回truereturn true;}else{//光标定位到文本框elem.focus();//在文本框后显示提示文字eSpan.innerHTML = text + \'格式不正确!\';//不符合则返回falsereturn false;}}
3.在表单元素上绑定提交事件，如下所示：
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();}});
还有一个问题需要解决，在文本框输入内容的时候，都应该删除后面的提示，不然输入正确还提示错误这不正常。
4. 在eFormContainer元素上绑定input事件，用于输入时删除提示文字。
eFormContainer.addEventListener(\'input\',function(event){//获取当前文本框let eInput = event.target;//获取文本框父元素let eParent = eInput.parentElement;//获取存放提示的span元素let eSpan = eParent.getElementsByTagName(\'span\')[0];//清空提示eSpan.innerHTML = \'\';});
写到这里，一个完整的表单验证页面基本完成了；本实例教程采用的是submit提交表单事件，而现在的实际开发中，已经很少这样直接提交表单了。特此说明，以免误导读者。
