jq判断输入框必填（适合多条件搜索，注册等等表单）

1、当然是先引入jq；

2、编写css

3、页面代码：

<form name="searchform" id="searchform" method="post" action="/search/index.php" target="_blank">
<table width="427" border="0" align="center" cellpadding="3" cellspacing="1">
<input type="hidden" name="classid" value="18">
<input type="hidden" name="andor" value="and">
    <tr bgcolor="#FFFFFF">
      <td width="61" height="36" align="right"><b>姓名：</b></td>
      <td width="351"> 
   <input name="keyboard[]" type="text" id="username" size="30" tabindex="1"/>&nbsp;<span class="errorinfo" id="info1">请输入姓名</span>
          </td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="36" align="right"><b>查询号：</b></td>
      <td> 
          <input name="keyboard[]" type="text" id="password" size="30" tabindex="2"/>&nbsp;<span class="errorinfo" id="info2">请输入查询号</span>
          </td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="30">&nbsp;</td>
      <td height="30">
        <input type="image" src="images/cx02_bg.gif" tabindex="3"/>
      </td>
    </tr>
  </table>
</form>

4、JS代码

$(document).ready(function(){
 $("#searchform").submit(function(){
  //获得表单值
  var username=$("#username").val();
  var password=$("#password").val();
  //如果表单为空，提示用户
  if(username==""){
   //显示错误提示信息
   $("#username").addClass("redborder");
   $("#info1").addClass("show");
   return false;
  }
  if(password==""){
   $("#password").addClass("redborder");
   $("#info2").addClass("show");
   return false;
  }
  return true;
 });
});

5、最终表现

PS：上列是当页面有多个form表单的情况，JS判断的是from的ID（如果不用from的ID来判断，用下面的第二种方法会产生冲突，因为第二种方法就是判断form）。

另一种情况是整个页面就一个form的，JS

$(document).ready(function(){
 $("form").submit(function(){
  //获得表单值
  var username=$("#username").val();
  var password=$("#password").val();
  //如果表单为空，提示用户
  if(username==""){
   //显示错误提示信息
   $("#username").addClass("redborder");
   $("#info1").addClass("show");
   return false;
  }
  if(password==""){
   $("#password").addClass("redborder");
   $("#info2").addClass("show");
   return false;
  }
  return true;
 });
});

注意红色部分和第一种方法的区别！