输入字段验证与表单提交功能详解-优快云博客

本文链接：https://blog.youkuaiyun.com/lengrenhanbing/article/details/84225453
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">   
		function submit(){
			var type="";
			//判断是否选择
			$("select option:selected").each(function () {
				type+=$(this).val()+""; 
			}) 
			if(type==""){
              $("#tipType").html("请选择类型");
			  return;
			}else{ 
              $("#tipType").html("选择的是"+type);
			}

			if($("#regionName").attr("value")==""){ 
				$("#regionName").css({background:"yellow", border:"3px red solid"}); 
				$("#tipRegionName").html("不能为空");
				$("#regionName").focus();
				return;
			}else{
				$("#regionName").css({background:"white", border:"2px green solid"});
				$("#tipRegionName").html("");
			}
			if($("#latitude").val()==""){ 
				$("#latitude").css({background:"yellow", border:"3px red solid"}); 
				$("#tipLatitude").html("不能为空");
				$("#latitude").focus();
				return;
			}else{
				$("#latitude").css({background:"white", border:"2px green solid"});
				$("#tipLatitude").html("");
			}
			if($("#longtitude").val()==""){ 
				$("#longtitude").css({background:"yellow", border:"3px red solid"}); 
				$("#tipLongtitude").html("不能为空");
				$("#longtitude").focus();
				return;
			}else{
				$("#longtitude").css({background:"white", border:"2px green solid"});
				$("#tipLongtitude").html("");
			}
			
			//判断checkbox有没有选择
			if(!$("input:checkbox").is(":checked")){  
				$("#tipHobby").html("请选择兴趣");
				return;
			}else{
				var str="";
				$("input:checkbox").each(function(){
					if($(this).is(":checked")){
					str+=$(this).val()+ " ";
					}
				})
				$("#tipHobby").html("选择的是"+str);
			}
			 
			 var sex = $("input:radio:checked").val();
			 $("#tipSexName").html("选择的是"+sex); 
		}
    </script>  
</head>  
<body>   
 <div style="margin-top: 5px;">
      类型：<select name="type" id="type">
                     <option value="" selected="selected">choose type</option>
                     <option value="Circle" >Circle</option>
                     <option value="Rectangle">Rectangle</option>
                     <option value="Line">Line</option>
                     <option value="Polygon">Polygon</option> 
                  </select>
				  <span id="tipType"></span></div>
                <div style="margin-top: 5px;">
                    名称：<input type="text" id="regionName" name="regionName" />
				    <span id="tipRegionName"></span>
				</div>  
                <div style="margin-top: 5px;">
                      纬度：<input type="text" id="latitude" name ="latitude"/>
					  <span id="tipLatitude"></span>
				</div>
                <div style="margin-top: 5px;">
                      经度：<input type="text" id="longtitude" name ="longtitude"/>
					  <span id="tipLongtitude"></span>
				</div> 
				<div style="margin-top: 5px;">
                    爱好：
					<input type="checkbox" id="Hobby1" name="sex" value="足球"/>足球
					<input type="checkbox" id="Hobby2" name="sex" value="篮球"/>篮球
				    <span id="tipHobby"></span>
				</div> 
				<div style="margin-top: 5px;">
                    性别：
					<input type="radio" id="sex1" name="sex" value="男" checked=checked/>男
					<input type="radio" id="sex2" name="sex" value="女"/>女
				    <span id="tipSexName"></span>
				</div>  
				<div style="margin-top:5px;"> 
                      <input style="margin-left: 20px; width: 50px;" type="button" value="Save" οnclick="submit()"/>
				</div>
</div> 
</body>
Jquery简单验证表单
