10.14工作问题汇总（输入框校验，下拉框数据回显）

最新推荐文章于 2022-10-14 16:57:57 发布

mjx715813

最新推荐文章于 2022-10-14 16:57:57 发布

阅读量124

点赞数

分类专栏：工作总结 Javaweb

本文链接：https://blog.csdn.net/mjx715813/article/details/102550898

版权

工作总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Javaweb

22 篇文章 0 订阅

订阅专栏

1. 输入框校验？

校验输入为数字

//保存
function create(){	
	var widthw = $("#width").val();
	var reg = new RegExp("^[0-9]*$");  //校验输入数据为数字
	if(reg.test(widthw)){
	var options = {  
			type:"post",
	    	url:getRootPath_web()+"/deviceScreenAdd.action",
	    	dataType:"json",
	    	success:function(result){
	    		if(result>0){
	    			alert("编辑成功！");
	    			close_layer();
	    		}else{
	    			alert("编辑失败！");
	    		}
	    	}  
        };
	      $("#fom").ajaxSubmit(options); 
	  }else{
	    	
    	  alert("窗口宽度请输入数字!");
  }
}

校验输入为0-5为数字

//保存
function create(){
	
	var x = $("#x").val();
	var y = $("#y").val();
	var widthw = $("#width").val();
	var heighth = $("#height").val();
	var pos = $("#pos").val();
	var reg = new RegExp("^[0-9]{0,5}$");	
	if(!reg.test(x)){
  	  alert("x轴开始位置请输入0-5位有效数字!");
     }else if(!reg.test(y)){
    	 alert("y轴开始位置请输入0-5位有效数字!");
     }else if(!reg.test(widthw)){
    	 alert("窗口宽度请输入0-5位有效数字!");
     }else if(!reg.test(heighth)){
    	 alert("窗口高度请输入0-5位有效数字!");
     }else if(!reg.test(pos)){
    	 alert("窗口位置请输入0-5位有效数字!");
     }else{
	
	var options = {  
			type:"post",
	    	url:getRootPath_web()+"/deviceWindowAdd.action",
	    	dataType:"json",
	    	success:function(result){
	    		if(result>0){
	    			alert("编辑成功！");
	    			close_layer();
	    		}else{
	    			alert("编辑失败！");
	    		}
	    	}  
        };
	$("#fom").ajaxSubmit(options);  
   }
}

2.下拉框数据回显

$(function(){
		
	var ledid = $("input[name='ledid']").val();
	$.ajax({
		type : "POST",
		url : getRootPath_web() + "/getScreenData.action?ledid="+ledid,
		success : function(result){
			var obj = result.data;
			console.log(obj);			
			$("#hallid").val(obj.hallid);			
			$("#ledaddr").val(obj.ledaddr);
			$("#wincnt").val(obj.wincnt);
			$("#wincnt").val(obj.wincnt);
			$("#width").val(obj.width);
			$("#checkboxTd input[value="+obj.enable+"]").attr("checked",true);
		}
	});
});

checkbox复选框转变为单选框

               <tr>
                    <td class="lable_td">是否启用：</td>
                    <td id =checkboxTd >
	                    <div style="width: 8%;float: left;">
		                   <input style="width: 20%;margin:0;vertical-align: text-top;" type="checkbox" name="enable" value="1" onclick="selectCheckOne(this)" />
		                   <span>
		                   		是
		                   </span>
	                    </div> 
	                    <div style="width: 8%;float: left;">
	                       <input style="width: 20%;margin:0;vertical-align: text-top;" type="checkbox" name="enable" value="0" onclick="selectCheckOne(this)" />
	                       <span>
		                   		否
		                   </span>
	                    </div>
                    </td>
                </tr>

js部分

<script>  
		function selectCheckOne(obj){
		    var checks = document.getElementsByName("enable");
		    if(obj.checked){
		       for( var i=0;i<checks.length;i++){
		        checks[i].checked=false;
		        }
		        obj.checked=true;
		    }else{
		        for( var i=0;i<checks.length;i++){
		        checks[i].checked=false;
		        }
		    }
		}
</script>

链接：https://www.php.cn/js-tutorial-387125.html