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

Bertha 。 2022-05-30 00:37 218阅读 0赞

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

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

<form  class="form1" οnsubmit="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代码如下

实现如下;

![70][]

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

![70 1][]

[70]: /images/20220530/aebb94897c3e45009fcf265846580e0c.png
[70 1]: /images/20220530/c2306644725e49b98ca939f7b57cb8e7.png