JS表单验证示例-优快云博客

本文链接：https://blog.youkuaiyun.com/it_software/article/details/4069775

本文介绍了一个使用JavaScript进行表单验证的示例，包括用户名、密码及其确认密码的检查。通过onblur事件触发验证，并利用innerHTML显示错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简易的JS表单验证JSP页面.

代码功能:

传统的JS表单验证为alert()返回一个警告信息.但是现在AJAX技术越来成熟,很多人都想采用一种页面无刷新的方式进行表单验证.

我们曾经看到过那种用户注册的功能,在输入完用户名之后,直接告诉你注册账号是否已经被注册.

此处仅仅是采用insertHTML方法来进行验证信息返回.没有任何技术含量.

具体功能允许大家探讨.希望菜鸟的我能够有越走越好.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page">  <mce:script type="text/javascript" language="javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">tr { height: 30px; background-color: white; color: blue; } input { color: blue; }</style> </head> <body> <form action="" name="loginForm" id="login"> <table width="400" align="center" border="0" cellspacing="1" bgcolor="green"> <tr> <td align="right"> 用户名 </td> <td> <input type="text" name="name" size="20" onblur="checkName()"> <font style="color: red; font-size: 12px;" mce_style="color: red; font-size: 12px;" id="NameNull"></font> </td> </tr> <tr> <td align="right"> 密码 </td> <td> <input type="password" name="password" size="20" onblur="checkPassword()"> <font style="color: red; font-size: 12px;" mce_style="color: red; font-size: 12px;" id="password"></font> </td> </tr> <tr> <td align="right"> 确认密码 </td> <td> <input type="password" name="passagain" size="20" onblur="checkPassagain()"> <font style="color: red; font-size: 12px;" mce_style="color: red; font-size: 12px;" id="passagain"></font> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" onclick="return checkData()" value="提交" id="button" style="width: 70px; height: 25px; background-color: #cccccc;"> </td> </tr> </table> </form> </body> </html>