首页 > 运营 > 帮助中心 > 正文

jq判断输入框必填(适合多条件搜索,注册等等表单)

2020-09-12 14:41:52
字体:
来源:转载
供稿:网友

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、最终表现

jq判断输入框必填(适合多条件搜索,注册等等表单)

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;
 });
});

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
黄大仙管家婆资料大全,管家婆免费资料大全最新,香港2021最准马资料免费,2021香港宝典资料免费大全,2021全年资料免费大全