JavaScript 客户端表单验证

最新推荐文章于 2024-04-20 14:59:10 发布
最新推荐文章于 2024-04-20 14:59:10 发布
阅读量621 收藏
点赞数
文章标签： javascript html login input action function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun20031724/article/details/1611251
版权

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page language="java"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
 
<html>
 <head>
  <title>JSP for loginForm form</title>
 </head>
 <body>
 <script language="javascript" type="text/javascript">
 function login()
 {
   if(document.loginForm.repassword.value=="")
   {
           alert('确认密码不能为空！');
           return false;
   }
    if((document.loginForm.password.value.length)<3)
   {
        alert('密码最少为4位')
        return false;
   }
   if(document.loginForm.repassword.value!=document.loginForm.password.value)
   {
        alert('密码与确认密码必须一致')
        return false;
   }
    
 }
 </script>
 <h4>Login</h4>
 <html:errors /><br/>
   <html:form action="/login" focus="loginForm"  οnsubmit="return login();">   
   username : <html:text property="username"/><br/>
   password : <html:password property="password"/><br/>
   repassword: <html:password property="repassword"/><br/><br/>
   <html:submit/><html:cancel/>  
     </html:form>
   <a href="/line/form/register.jsp">Register</a>
 </body>
</html> 

-----------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page contentType="text/html;charset=gb2312"%>
<%@ page language="java"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
 
<html>
 <head>
  <title>JSP for loginForm form</title>
 </head>
 <body>
 <script language="javascript" type="text/javascript">
 function login()
 {
   if(document.loginForm.repassword.value=="")
   {
           alert('repassword is required ！');
           return false;
   }
 }
 </script>
 <h4>Login</h4>
 <html:errors /><br/>
 
 
 
 <form name="loginForm" action=/line/login.do onSubmit="return login();">   
   username : <input name="username" type="text"/><br/>
   password : <input name="password" type="password"/><br/>
   repassword: <input name="repassword" type="password"/><br/><br/>
   <input name="submit" type="submit"  value="submit">
  </form>   
   <br>
   <a href="/line/form/register.jsp">Register</a>
  </form> 
 </body>
</html>

sun20031724
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Form表单验证
weixin_30664539的博客
08-23 5462
Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本 Input type=submit定义提交按钮，提交按钮会把表单数据发送到服务器 1. oncli...
js编写常用的表单验证，js表单验证完整代码
qq_36395463的博客
01-17 964
日期： 电话号码： E-mail： 金额： 输入汉字： 输入密码： 弱中强 再一次输入密码： 输入验证码：获取验证码
form表单校验
m0_65132206的博客
05-19 7638
表单校验的基本步骤--简单校验,可以在基础上添加if判断校验成功跳转路由......
JavaScript表单验证表单验证
最新发布
zzb_lly的博客
04-20 274
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等。验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等。· 验证用户名与密码为指定格式。· 验证单选框所选内容。
JavaScript之表单验证
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
JavaScript实现表单验证（包含实例）
Cavewang的博客
09-06 3829
表单验证表单验证意义与场景降低服务器压力提升用户体验表单验证举例界面效果展示 表单验证意义与场景 降低服务器压力 拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销 提升用户体验 早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。 表单验证举例 js
基于JavaScript的客户端表单验证.pdf
01-02
"基于JavaScript的客户端表单验证.pdf" 基于JavaScript的客户端表单验证是指在客户端使用JavaScript语言来实现表单验证的技术。这种技术可以在用户提交表单之前对表单数据进行验证，从而避免了非法数据的提交和...
常用javascript表单验证汇总
10-23
在网页开发中，JavaScript 是一种不可或缺的脚本语言，它被广泛用于实现客户端的交互功能，其中表单验证就是非常重要的一环。表单验证能够确保用户输入的数据符合预期，提高用户体验，防止无效或恶意的数据提交到...
jquery 表单进行客户端验证demo
10-29
本示例是关于如何使用jQuery库进行客户端表单验证的一个具体应用，适合初学者参考。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。 在给定的代码中，首先引入了两个...
judge:Rails的客户端表单验证
04-14
通过将许多ActiveModel::Validation功能移植到JavaScript，Judge可以轻松地对Rails进行客户端表单验证。 最常见的验证通过存储在HTML5数据属性中的JSON字符串进行，并且仅在客户端执行。 无论您在何处，Judge都为...
bureaucrat:客户端表单验证
06-20
如何安装 使用 Bower bower install bureaucrat 其他 .../body>标记之前。 这个怎么运作 演示： : 启动 Bureaucrat 将<... var form = document....当用户提交表单时submit测试所有字段 示例： <form data-trig
javascript实现常用的表单前台数据的校验
03-28
NULL 博文链接：https://chen106106.iteye.com/blog/1204443
Form验证表单Form验证表单
02-06
Form验证表单Form验证表单Form验证表单Form验证表单
HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)
热门推荐
qq_46015509的博客
06-09 4万+
HTML 表单登录js简单验证
form表单的多种提交方式及提交前验证
qq_42128262的博客
06-21 2万+
以下是本人总结处来的一些form的提交方式，网上还有别的提交方式，这里我总结了大小分为7类，其实就是三类的提交方式，若有哪里不对的，还请评论指出来，大家一起学习学习 1、无任何验证提交（最普通的提交） 该方式不提供任何的验证方式，当我们点击提交时（提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”） for...
JavaScript的基础表单验证
zcj666999的博客
05-30 849
一般来说绝大多数网站都会有用户注册、用户登录这些基本的功能。 那么用户注册具体是如何实现的呢？ 登录页面 login.jsp 用户登录 JavaSpri校验 登录表单验证 1. 给登录按钮绑定点击事件 2. 获取用户姓名和密码的值 3. 判断姓名是否为空 如果姓名为空，提示用户（span标签赋值...
自定义form表单验证
hogwarts_ziqi的博客
08-02 472
表单验证通常往往用于一些信息填写完成以后,前端提交到服务器之前的一个自检过程，比如用户输入的手机号是都正确？用户输入的邮箱是否正确？当使用form表单时，基础的一些验证满足不了我们项目中的需求时，这时候我们就需要去自定义验证规则。现在我们来定义一个在项目中使用过的表单验证，来校验我们输入的富文本内容是否为空，包括空格。form表单校验根据自己的需求不同，可以自己定义校验规则，从而更灵活的满足需求。**email**校验邮箱格式。为什么要自定义form表单验证？如何自定义form表单验证？...
JavaScript 表单验证
weixin_66107852的博客
02-03 96
JavaScript 表单验证
JavaScript中的表单验证
ren__wei_的博客
01-10 5673
文章目录1.什么是表单验证2.常见的表单验证 1.什么是表单验证 大多数网站的注册页面中，都会要求用户输入生日，我们知道日期的格式是yyyy-MM-dd并且由数字组成，中间不允许出现字母或是其他符号，如果填写格式与日期格式不符合，name注册将失败，这种操作就是表单验证的体现。 表单验证就是js在数据被送往服务器前，对html表单中的数据进行验证的过程，在验证所有信息均符合要求之后，经表单提交到服务器由服务器进行数据处理。常见的表单验证有：表单中的必填项目、输入的邮件是否合法，输入日期是否合法等。 2.常见
javascript客户端数据验证
09-10
JavaScript 客户端数据验证可以通过以下几种方式来实现： 1. 表单验证：在表单提交之前，通过 JavaScript 对用户输入的数据进行验证。可以使用 HTML5 自带的表单验证属性，如 `required`、`pattern`、`min`、`max` 等，也可以使用 JavaScript 编写自定义验证函数。 ```html <form onsubmit="return validateForm()"> <input type="text" id="name" required> <input type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required> <input type="submit" value="Submit"> </form> <script> function validateForm() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; // 自定义验证逻辑 if (name === "") { alert("请输入姓名"); return false; } if (email === "") { alert("请输入邮箱"); return false; } return true; } </script> ``` 2. 正则表达式验证：使用 JavaScript 正则表达式对数据进行格式验证。例如，验证邮箱格式： ```javascript function validateEmail(email) { var pattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/; return pattern.test(email); } var email = "test@example.com"; if (validateEmail(email)) { console.log("邮箱格式正确"); } else { console.log("邮箱格式不正确"); } ``` 3. 第三方库：使用第三方库进行数据验证，如 jQuery Validation、Validator.js 等。这些库提供了更丰富的验证规则和错误提示功能，可以简化开发过程。 以上是一些常见的 JavaScript 客户端数据验证方法，根据具体需求选择适合的方式来实现数据验证。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值