JQuery验证jsp页面属性是否为空(实例代码)


Posted in Javascript onNovember 08, 2013

说明:验证是否为空的前提首先要保证是在提交form之前验证的,如果验证结果有为空的项那么限制表单不能提交,并且提示验证错误信息,验证页面属性都不为空的情况下表单正常提交,这部分属于JS部分的东西,与后台业务逻辑层和控制层基本没有任何关系。

限制提交的方法可以是在form标签里限制,也可以是在submit按钮上添加onclick事件限制:

<form action=".." method="post" onsubmit="return check();">
<input type="submit" value="提交" onclick="return check()" >

案例:

<form action="./login.action" method="post" onsubmit="return check();">
<table>
<tr>
<td width="451"> </td>
<td width="378">
<table >
<tr>
<td width="60"> </td>
<td>
<font color="#000000">用户名:</font>
</td>
<td align="left"> <input name="userInfo.userName" id="userName" type="text">
<span id="checkUserName"></span> 
</td>
<tr> <td> </td>
<td align="right" nowrap>
<font color="#000000">密 码:</font>
</td>
<td align="left">
<input name="userInfo.password" id="password" type="password">
<span id="checkPassword"></span>
</td>
</tr>
<tr>
<td colspan="4" align="center" nowrap>
<input type="submit" id="btnLog" value=" 登 录 " >
   <input type="reset" value=" 重 置 ">
</td>
</tr>
</table>
</form>

<!--引入js文件 jquery-->
<script type="text/javascript" src="js/common/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function check(){
var userName=$("#userName").val();
var password=$("#password").val();
alert(userName);
alert(password);
if(userName==""){
$("#checkUserName").html("<font color='red'>用户名不能为空!</font>");
return false;
}
if(password==""){
$("#checkPassword").html("<font color='red'>密码不能为空!</font>");
return false;
}
return true;
}
</script>
Javascript 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 #Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 #Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 #Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 #Javascript
iframe子父页面调用js函数示例
Nov 07 #Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 #Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 #Javascript
You might like
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php的socket编程详解
2016/11/20 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
许愿墙中用到的函数
2006/10/07 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
详解python读取和输出到txt
2019/03/29 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
群众路线领导班子整改方案
2014/10/25 职场文书