文盲的 JavaScript 实战篇之一:表单验证

2024-02-25 20:58

本文主要是介绍文盲的 JavaScript 实战篇之一:表单验证,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在我们的日常工作中,经常为各种页面撰写不同的表单,并且,需要对表单提交时,表单所输入的内容进行验证,比如,登录时,用户名不能为空、注册时,密码长度和复杂程度要符合安全标准等。
  1. <form name="theForm" method="post" action="actionUrl">
  2.     <li>用 户 名:<input type="text" name="uid" /></li>
  3.     <li>登录密码:<input type="password" name="pwd" /></li>
  4.     <li>确认密码:<input type="password" name="cpwd" /></li>
  5.     <li>注册信箱:<input type="text" name="mail" /></li>
  6.     <li><input type="submit" value="立刻注册" /></li>
  7. </form>
如上,就是一个最简单的注册表单,那么我们怎么对这个表单进行验证呢?

第一个选择就是,在什么时候验证,我们有以下几种选择

1、在输入数据时进行验证
2、在点击提交按钮时进行验证
3、在表单提交时进行验证

这里猛一看,第二项与第三项没有区别,其实是完全不同的,点击 submit 按钮是可以与第三项看做同一个动作,但如果表单中有这样一个按钮呢?
  1. <input type="button" value="submit" onclick="theForm.submit()" />
这样,就可以绕过第二项了,但第三项却可以捕捉到这个动作,因为他同样是提交动作。

而第一个选择,就需要对每一个输入控件进行 onchange 或者 onblur 的监控,并且需要在页面内出现校验结果,操作比较麻烦,这里就不再进行讨论。

这里我们先进行第三项的讨论

那么,如何实现第三项方法呢,我们把 form 标签进行一下修饰
  1. <form name="theForm" method="post" action="actionUrl" onsubmit="return checkForm(this);">
这个时候,当这个表单发生提交的时候,他就会运行 checkForm 这个函数,并且将表单本身作为对象参数传递给 checkForm 这个函数了。关于arguments请参阅 文盲的 JavaScript 经验谈之三:认识 arguments。
  1.     function checkForm(){
  2.         // 首先校验传递进来的参数数量
  3.         if (!arguments.length){
  4.             alert('异常的参数数量!');
  5.             return false;
  6.         }
  7.         var frm = arguments[0];
  8.         // 其次校验传递进来的参数是否符合标准
  9.         if (!frm.elements){
  10.             alert('第一个参数必须是表单!');
  11.             return false;
  12.         }
  13.         return false;
  14.     }
这个时候并没有对表单内的数据进行校验,我们把需要校验的内容同样作为参数传递个校验函数,代码如下

JavaScript:
  1.     function checkForm(){
  2.         // 首先校验传递进来的参数数量
  3.         if (!arguments.length){
  4.             alert('异常的参数数量!');
  5.             return false;
  6.         }
  7.         var frm = arguments[0];
  8.         // 其次校验传递进来的参数是否符合标准
  9.         if (!frm.elements){
  10.             alert('第一个参数必须是表单!');
  11.             return false;
  12.         }
  13.         if (((arguments.length - 1) % 3)||(arguments.length / 3 < 1)){
  14.             alert('异常的参数数量!/n/n参数格式如下:/n/ncheckForm(this/n    ,"elementName","ExpStr","alertWords"/n    [,"elementName","ExpStr","alertWords"/n    [,....]])');
  15.             return false;
  16.         }
  17.         for (var i = 0 ; i < arguments.length /3 ; i ++ ){
  18.             var el = frm.elements[arguments[i * 3 + 1]];
  19.             if (!el){   // 校验传递进来的控件是否存在
  20.                 alert('表单中不存在 name 为 "' + arguments[i * 3 + 1] + '" 的控件!');
  21.                 return false;
  22.             }
  23.             var cf = frm.elements[arguments[i * 3 + 2]];
  24.             if (cf){   // 判断传递进来的参数是否为控件
  25.                 if (cf.value!=el.value){
  26.                     alert(arguments[i * 3 + 3]);
  27.                     el.focus();
  28.                     return false;
  29.                 }
  30.             }else{
  31.                 var re = RegExp(arguments[i * 3 + 2],'gi');
  32.                 if (!re.test(el.value)){   // 对控件值进行正则匹配
  33.                     alert(arguments[i * 3 + 3]);
  34.                     el.focus();
  35.                     return false;
  36.                 }
  37.             }
  38.         }
  39.         return true;
  40.     }

HTML:
  1. <form name="theForm" method="post" action="actionUrl" onsubmit="return checkForm(this,'uid','^[a-zA-Z0-9]{3,8}$','用户名只能有字母、数字组成,长度必须在 3 到 8 位。','pwd','^[//s//S]{6,16}$','密码可以由任意字符组成,长度为 6 到 16 位。','cpwd','pwd','确认密码与登录密码不一致。','mail','^[//w.-]+@([0-9a-z][//w-]+//.)+[a-z]{2,3}$','请输入合法的Email地址。');">
  2.     <li>用 户 名:<input type="text" name="uid" /></li>
  3.     <li>登录密码:<input type="password" name="pwd" /></li>
  4.     <li>确认密码:<input type="password" name="cpwd" /></li>
  5.     <li>注册信箱:<input type="text" name="mail" /></li>
  6.     <li><input type="submit" value="立刻注册" /></li>
  7. </form>

这里是使用正则进行判断,checkForm 的第一个参数是表单本身,然后按照三个一组的规律,分别传递控件名、校验正则、校验失败提示语,或者是控件名、控件名、校验失败提示语。

如此一来,我们的表单校验就基本上完成了。

这篇关于文盲的 JavaScript 实战篇之一:表单验证的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/746698

相关文章

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Java逻辑运算符之&&、|| 与&、 |的区别及应用

《Java逻辑运算符之&&、||与&、|的区别及应用》:本文主要介绍Java逻辑运算符之&&、||与&、|的区别及应用的相关资料,分别是&&、||与&、|,并探讨了它们在不同应用场景中... 目录前言一、基本概念与运算符介绍二、短路与与非短路与:&& 与 & 的区别1. &&:短路与(AND)2. &:非短

Java的volatile和sychronized底层实现原理解析

《Java的volatile和sychronized底层实现原理解析》文章详细介绍了Java中的synchronized和volatile关键字的底层实现原理,包括字节码层面、JVM层面的实现细节,以... 目录1. 概览2. Synchronized2.1 字节码层面2.2 JVM层面2.2.1 ente

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Java捕获ThreadPoolExecutor内部线程异常的四种方法

《Java捕获ThreadPoolExecutor内部线程异常的四种方法》这篇文章主要为大家详细介绍了Java捕获ThreadPoolExecutor内部线程异常的四种方法,文中的示例代码讲解详细,感... 目录方案 1方案 2方案 3方案 4结论方案 1使用 execute + try-catch 记录

SpringBoot接收JSON类型的参数方式

《SpringBoot接收JSON类型的参数方式》:本文主要介绍SpringBoot接收JSON类型的参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、jsON二、代码准备三、Apifox操作总结一、JSON在学习前端技术时,我们有讲到过JSON,而在

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g