jQuery 实现表单提交前检验元素值是否为空

原创 2018年02月28日 17:35:09

jQuery 实现表单提交前检验元素值是否为空

在<form>标签中添加 onsubmit="return checkForm()"

<form  class="form1" onsubmit="return checkForm()" action="user/add.action">
		  <div class="div1">
<ul>
 			<li>
 			<div class="div2">
 				
 			id:<input  type="text" name="id" id="id" >
 				<span style="display:none;border:0;float:right;margin-right:180px" id="t1" >请输入数字</span><br />
 			</div>
 			<div id="id1" class="id2" style="dispaly:block">
				  <span class="id2">请输入你的id</span>
			</div>
 			</li>
			
			
			
			<li >
				
				<div >
					用户名:<input type="text" name="username" id="username" >
					<span style="display:none;border:0;float:right;margin-right:50px" id="t2" >用户名长度为3-6位</span><br />
				</div>
				<div id="usern" class="username1" style="dispaly:block">
				  <span class="username1">请输入你的用户名</span>
				</div>
			</li>
			
			<li>
				
				<div class="div2">
					密码    :<input type="text" name="password" id="password">
					<span style="display:block	;border:0;float:right;margin-right:50px" id="t3" >请输入6-18位字母或数字</span><br />
				</div>
				<div id="pwd" class="pwd1" style="dispaly:block">
				  <span class="pwd1">请输入你的密码</span>
				</div>
			</li>
			
			<li>
				
				<div class="div2">
					性别    :<input type="radio" name="sex" id="sex" checked="checked" value="0">男
					<input type="radio" name="sex" id="sex" value="1">女<br />
				</div>
			</li>
			</ul>
		  </div>
		  <div class="div1">
		  	<div></div>
		  	<input type="reset" value="重置">
		  	<input type="submit" value="确定" >
		  </div>
		  
		</form>

jQuery代码如下

<script type="text/javascript">
    	
 	 var flag = true;
 	 var flag1= true;
 	 var flag2= true;
 	 function checkForm(form1){ 
		if($("#id").val() == ""){
		$("#id1").show();
		flag = false;
		}else{
			$("#id1").hide();
			flag = true;
			}
			if($("#username").val() == ""){
			$("#usern").show();
			flag1 = false;
			}else{
			$("#usern").hide();
			flag1 = true;
			}
			 if($("#password").val() == ""){
				
					$("#pwd").show();
					flag2 = false;
					
				}else {
					$("#pwd").hide();
					flag2 = true;
				}
				if(flag && flag1 && flag2){
				$(".form1").submit();
				
				return true;
			    }else{
			    	return false;
			    }
			return flag;
 	 }
</script>

实现如下;

如果不输入内容则显示如下:


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30938705/article/details/79403374

表单提交时判断所有控件不能为空

方法一:用JavaScript(好用) function myCheck() {//循环所有的表单元素; 也可以用jQuery:$("#表单id")...
  • MRZZXzzx
  • MRZZXzzx
  • 2017-11-22 16:43:49
  • 901

jQuery验证文本框内容不为空

通过$.fn 扩展jQuery方法 /** * 校验文本是否为空 * tips:提示信息 * 使用方法:$("#id").validate("提示文本"); * @itmyhome *...
  • itmyhome
  • itmyhome
  • 2017-01-12 20:54:43
  • 6107

使用JQuery,但不使用JQuery validate 来验证表单非空情况

需求:表格分为主表与子表,见图。主表项个数不变(题目、排序序号、是否必填、是否多选),子表动态生成(每点击一次新鲜选项内容,生成一组选项名称,排序序号,是否默认选择)在点击“保存”,验证主表项非空,以...
  • hlbt0112
  • hlbt0112
  • 2016-01-28 10:26:39
  • 3162

js判断所有表单项不为空则提交表单

function myCheck() { for(var i=0;i
  • u011986449
  • u011986449
  • 2014-11-09 15:59:38
  • 8674

JQuery实现提交(submit)表单时候验证所有文本框是否为空

JQuery实现提交(submit)表单时候验证所有文本框是否为空
  • u014175572
  • u014175572
  • 2016-04-12 17:01:53
  • 8953

Jquery自制表单实时验证

关于Jquery表单
  • liaodehong
  • liaodehong
  • 2016-08-08 17:06:24
  • 2545

使用 纯JQuery 进行 表单 验证

对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表...
  • Marksinoberg
  • Marksinoberg
  • 2016-07-27 11:18:32
  • 7548

jQuery验证表单插件——jquery-validation

jQuery验证表单插件——jquery-validation The jQuery Validation Plugin provides drop-in validation for your ...
  • q547550831
  • q547550831
  • 2016-09-25 15:09:43
  • 1115

JS判断提交表单不能为空 等的验证

function beforeSubmit(form){ if(form.username.value==''){ alert('用户名不能为空!'); form.username.focus(...
  • qiu512300471
  • qiu512300471
  • 2014-04-09 12:08:02
  • 5224
收藏助手
不良信息举报
您举报文章:jQuery 实现表单提交前检验元素值是否为空
举报原因:
原因补充:

(最多只允许输入30个字)