js实现表单验证的思路及代码说明
发布时间：2022-04-20 09:38:34 所属栏目：语言 来源：互联网
导读：在做web开发时，我们会经常遇到表单验证的需求。对新手来说，掌握表单验证对于理解字符串处理以及正则表达式都有很大的帮助。这篇文章就主要介绍，原生介绍实现表单验证功能。 首先，我们要知道基本的表单验证包括如：字母验证、数字验证、字母和数字验证、
|
在做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(){ 5. 判断输入的值是否符合规则，即只有英文字母没有其他字符。在这里声明一个正则表达式，用于判断是否都是英文字母。如下所示： eFormContainer.addEventListener('submit',function(){ /* ... */ //声明正则，并判断字符串是否都是英文字母 let reg = /^[a-zA-Z]+$/; bPass = reg.test(sValue); （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
