jQuery无刷新表单验证与JS交互实践
"这篇文章主要介绍了如何使用jQuery实现最简单的无刷新表单验证,包括检查密码是否为空、验证两次输入的密码是否一致以及通过JavaScript获取Session的值。" 在Web开发中,表单验证是非常重要的一环,它可以确保用户输入的数据符合预设的规则,避免无效数据提交到服务器。jQuery作为一种强大的JavaScript库,提供了方便的API来简化DOM操作和事件处理,使得表单验证变得更加容易。 1. 验证密码是否为空 在示例代码中,我们看到jQuery被用来检测密码字段(#pwd)和确认密码字段(#repwd)是否为空。当页面加载完成($(function(){}),也就是$(document).ready()的简写)时,会执行一个函数。在这个函数内,首先获取两个输入框的值,如果密码输入框的值为空,会在错误提示元素('.Error')中显示红色警告信息,并阻止表单提交。同样的逻辑也应用在确认密码字段上。 ```javascript if(pwd.val()==''){ error.html('<font color="red">密码不能为空!</font>'); return false; } ``` 2. 验证密码是否一致 如果两个密码输入框的值不匹配,会在确认密码的错误提示元素('.REERROR')中显示红色警告信息,同时也会在密码错误元素('.Error')中显示,以提醒用户输入的密码必须一致。 ```javascript if(repwd.val()!=pwd.val()){ reerror.html('<font color="red">两次密码输入不一致!</font>'); error.html('<font color="red">两次密码输入不一致!</font>'); return false; } ``` 3. jQuery实现无刷新表单提交 通过绑定点击事件到提交按钮(#sub),我们可以实现在验证通过后才提交表单。这里使用了`event.preventDefault()`方法来阻止默认的表单提交行为,只有当用户名输入框(#username)的值不为空时,才会显示信息并允许表单继续提交。 ```javascript $("#sub").bind("click", function(event) { var username = $("#username").val(); if (username == "") { $("#msg").html("<p>用户名不能为空.</p>"); event.preventDefault(); } }); ``` 4. 使用JavaScript获取Session值 在Struts2框架中,可以使用隐藏字段(<s:hidden>)来存储Session中的值。在HTML中定义一个ID为"userIdInSe"的隐藏字段,其值等于Session中的"userId"。然后,通过JavaScript可以轻松地获取这个值,以便在客户端使用。 ```javascript var id = document.getElementById("userIdInSe").value; if (id == '') { alert('没有找到"userId"的Session值'); } ``` 总结来说,这段代码展示了如何使用jQuery进行基本的表单验证,包括验证密码非空和一致性,以及如何在客户端获取Session中的数据,这些都是构建用户友好的交互式Web应用时常见的实践。通过这样的验证,可以提升用户体验,减少服务器端的处理负担,同时也能提高数据的准确性和安全性。
select * from tablename where rownum <= 10 order by id desc
2:js判断密码是否为空
<script>
$(function(){
var pwd = $("#pwd");
var repwd = $("#repwd");
var error = $('.Error');
var reerror = $('.REERROR');
if(pwd.val() == '') {
error.html('<font color="red">对不起,密码不能为空!</font>');
return false;
} else if(repwd.val() == ''){
reerror.html('<font color="red">对不起,重复密码不能为空!</font>');
return false;
} else if(repwd.val() != pwd.val()){
reerror.html('<font color="red">对不起,两次密码输入不一致!</font>');
error.html('<font color="red">对不起,两次密码输入不一致!</font>');
return false;
} else {
return true;
}
})
</script>
3:jQuery实现最简单的无刷新表单验证代码
<script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦