jq判断输入框是否填写了内容（在表单提交前进行检测）

时间：2016-02-19 17:21:40

分类：优秀文章

1、首先在页面顶部引入jq；
2、编写css
3、页面代码：
折叠XML/HTML 代码
  1. <form name="searchform" id="searchform" method="post" action="/search/index.php" target="_blank">  
  2. <table width="427" border="0" align="center" cellpadding="3" cellspacing="1">  
  3. <input type="hidden" name="classid" value="18">  
  4. <input type="hidden" name="andor" value="and">  
  5.     <tr bgcolor="#FFFFFF">  
  6.       <td width="61" height="36" align="right"><b>姓名：</b></td>  
  7.       <td width="351">   
  8.    <input name="keyboard[]" type="text" id="username" size="30" tabindex="1"/> <span class="errorinfo" id="info1">请输入姓名</span>  
  9.           </td>  
  10.     </tr>  
  11.     <tr bgcolor="#FFFFFF">  
  12.       <td height="36" align="right"><b>查询号：</b></td>  
  13.       <td>   
  14.           <input name="keyboard[]" type="text" id="password" size="30" tabindex="2"/> <span class="errorinfo" id="info2">请输入查询号</span>  
  15.           </td>  
  16.     </tr>  
  17.     <tr bgcolor="#FFFFFF">  
  18.       <td height="30"> </td>  
  19.       <td height="30">  
  20.         <input type="image" src="images/cx02_bg.gif" tabindex="3"/>  
  21.       </td>  
  22.     </tr>  
  23.   </table>  
  24. </form>  
4、JS代码
折叠JavaScript 代码
  1. $(document).ready(function(){  
  2.  $("#searchform").submit(function(){  
  3.   //获得表单值  
  4.   var username=$("#username").val();  
  5.   var password=$("#password").val();  
  6.   //如果表单为空，提示用户  
  7.   if(username==""){  
  8.    //显示错误提示信息  
  9.    $("#username").addClass("redborder");  
  10.    $("#info1").addClass("show");  
  11.    return false;  
  12.   }  
  13.   if(password==""){  
  14.    $("#password").addClass("redborder");  
  15.    $("#info2").addClass("show");  
  16.    return false;  
  17.   }  
  18.   return true;  
  19.  });  
  20. });  
5、最终效果
55785415xb9ed5c49ad44&690.jpg
PS：上列是当页面有多个form表单的情况，JS判断的是from的ID（如果不用from的ID来判断，用下面的第二种方法会产生冲突，因为第二种方法就是判断form）。
另一种情况是整个页面就一个form的时，JS代码如下
折叠JavaScript 代码
  1. $(document).ready(function(){  
  2.  $("form").submit(function(){  
  3.   //获得表单值  
  4.   var username=$("#username").val();  
  5.   var password=$("#password").val();  
  6.   //如果表单为空，提示用户  
  7.   if(username==""){  
  8.    //显示错误提示信息  
  9.    $("#username").addClass("redborder");  
  10.    $("#info1").addClass("show");  
  11.    return false;  
  12.   }  
  13.   if(password==""){  
  14.    $("#password").addClass("redborder");  
  15.    $("#info2").addClass("show");  
  16.    return false;  
  17.   }  
  18.   return true;  
  19.  });  
  20. });  
分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.