原生javascript表单验证实例教程
表单验证是web前端最常见的功能之一,也属于前端开发的基本功。自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解。
学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。
基础的表单验证包括如字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证,密码验证等。
现在就来完成这些验证代码的编写,先来看字母是怎么验证的。先编写需要的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>
作为一个前端,完成任何一个作品之前,都应该尽量让其美观一些。你可以根据自己的喜好编写样式,也可以直接复制下面的样式:
.form_Box{ width:800px; margin:30px auto; } .form_Box dt{ float:left; width:120px; line-height:36px; text-align:right; font-size:14px; } .form_Box dd{ margin-left:130px; line-height:36px; } .form_Box input[type=text],.form_Box input[type=password]{ height:30px; width:220px; line-height:28px; padding:0 5px; border:1px solid #bbb; border-radius:4px; outline:none;; } .form_Box input:focus{ border-color:#2D9AFF; box-shadow:0 0 6px #7ABFFF; } .form_Box input+span{ color:#c00; font-size:12px; margin-left:10px; } .form_Box .btn{ padding:0 20px; color:#fff; cursor:pointer; line-height:30px; border:none; margin-right:20px; font-size:14px; background:#108ee9; border-radius:4px; }
嗯,这样看起来舒服很多。现在可以开始使用原生js来实现验证功能了。开发的时候,一步一步完成功能,可以保持清晰的思路。
- 获取表单元素及文本框元素,如下所示:
var eFormContainer = document.getElementById('formContainer'); var eVerifyEn = document.getElementById('verifyEn');
- 给表单元素绑定提交事件,用于点击提交按钮时,进行验证。
eFormContainer.addEventListener('submit',function(event){ });
本实例要求当通过验证时,弹出提示通过验证;如果验证没有通过时,光标定位到文本框,并在文本框后显示验证失败的提示。接下来看下在提交事件函数中,具体怎么样做。
- 在提交事件函数中,声明相关变量并获取文本框的值。bPass变量用于判断是否可通过验证;sPrompt变量是提示文字;sValue变量是文本框的值。
var bPass = false; var sPrompt = ''; var sValue = eVerifyEn.value;
- 不允许文本框为空。判断sValue是不是空字符串,如果是则在文本框后显示提示,并且激活文本框,还需要阻止后续操作和默认行为,代码如下:
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 = ''; });
此时的完整代码如下:
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();
随后我们还需要完成数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证,密码等。如果每一次验证都这么写的话,会很繁琐,而且代码也会比较多。所以需要封装一个字符串验证的函数,返回验证结果。在提交的时候再每一个文本框依次调用。修改已有代码:
- 获取表单元素和所有文本框,如下所示:
// 获取表单元素 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步不变,还是给表单元素绑定提交事件。
第3步只需要声明bPass变量,提示文字和文本框值不需要在这里获取。
- 在绑定事件函数外,封装一个验证函数,传入三个参数:elem为文本框元素,reg为正则表达式,text为提示关键字。
function fnVerify(elem,reg,text){ }
验证函数中,需要进行两个验证,第一是验证是否为空,第二是验证输入的字符是否符合规则。验证通过返回true,否则激活当前文本框,在文本框后显示提示文字,并返回false。看下在验证函数中,具体怎么实现。
4.1 获取文本框输入的字符串和文本框后的提示元素
//获取文本框输入的字符 var sValue = elem.value; //获取文本框父元素 let eParent = elem.parentElement; //获取存放提示的span元素 let eSpan = eParent.getElementsByTagName('span')[0];
4.2 阻止提交空字符
//判断文本框字符是否为空 if(sValue.trim()==''){ //光标定位到文本框 elem.focus(); //在文本框后显示提示文字 eSpan.innerHTML = text + '不能为空!'; //返回false return false; }
4.3 根据reg参数的正则表达式,判断是否符合规则
// 判断字符串是否符合规则 if(reg.test(sValue)){ //如果符合,返回true return true; }else{ //光标定位到文本框 elem.focus(); //在文本框后显示提示文字 eSpan.innerHTML = text + '格式不正确!'; //不符合则返回false return 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 = '确认密码要和密码保持一致'; //阻止后续操作 bPass = false; }
- 根据bPass变量通过验证或阻止表单提交
if(bPass){ //通过验证弹出提示 alert('通过验证'); }else{ //阻止表单提交 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 = ''; });
写到这里,一个完整的表单验证页面基本完成了;本实例教程采用的是submit提交表单事件,而现在的实际开发中,已经很少这样直接提交表单了。特此说明,以免误导读者。
- 点赞
- 收藏
- 分享
- 文章举报
- PHP入门教程之表单与验证实例详解
- JavaScript表单验证实例之验证表单项是否为空
- javascript实例教程(6) 在一个表单中设置和检查Cookies
- 【javascript】学习总结——表单验证实例
- ThinkPHP表单自动提交验证实例教程
- JavaScript表单验证实例
- 使用原生javascript创建通用表单验证——更锋利的使用dom对象
- 使用原生javascript创建通用表单验证 —— 更锋利的使用dom对象
- 原生javaScript form表单数据验证
- JavaScript表单验证实例之验证表单项是否为空
- 使用原生javascript创建通用表单验证——更锋利的使用dom对象
- PHP入门教程之表单与验证实例详解
- JavaScript - 表单验证实例
- javascript实例(一)验证表单是否空白
- ThinkPHP表单自动提交验证实例教程
- JavaScript 正则表达式表单验证简单实例
- JavaScript - JavaScript通用表单验证函数(实例)
- JavaScript强化教程-表单验证
- 【实例】javascript表单验证的例子
- JavaScript教程-表单验证和常用特效