Js 验证表单-优快云博客

本文探讨了在网页中实现输入验证与页面交互的代理案例，通过使用jQuery和JavaScript来确保用户输入的数据符合特定规则，同时提供了返回上一页、删除提示等功能。文章详细介绍了如何使用jQuery和原生JavaScript进行事件监听、表单验证和页面跳转操作，旨在提高用户体验和数据安全性。

预加载



	$(document).ready(function(){
  		$("#conid").focus();
  	});

  	jQuery(document).ready(function(){
  		$("#comid").focus();
  	});

	jQuery(function(){
		jQuery("#comid").focus();
	});
	$(function(){
		$("#comid").focus();
	});

	$(document).ready(function(){
		$("#comid").focus();
	});

验证是否为空


function add(){
  			var conid=$("#conid").val();
  			var comid=$("#comid").val();
  			var empid=$("#empid").val();
  			if(conid==""){
  				alert("内容不能为空");
  				return false;
  				$("conid").focus();
  			}
  			if(comid==""){
  				alert("公司不能为空");
  				return false;
  				$("#comid").focus();
  			}
  			if(empid==""){
  				alert("员工不能为空");
  				return false;
  				$("#empid").focus();
  			}
  			return true;
  		}

返回上一页


<a href="javascript:history.go(-1)">返回上一页</a>

删除提示：


function del(){
	if(confirm("确定删除吗？")){
			return true;
	}else{
		return false;
	}
}

调用方法：
out.println("<a href='del.jsp?id="+rs.getInt("id")+"'  onclick='return del();'>"+"删除"+"</a>");


  	$(document).ready(function(){
  		$("#conid").focus();
  		$("#loginid").submit(function(){
  			if($("input[name='content']").val()==""){
  				alert("内容不能为空");
  				$("input[name='content']").focus();
  				return false;
  			}
  			if($("input[name='company']").val()==""||$("input[name='company']").val().length==0){
  				alert("公司名不能为空");
  				$("input[name='company']").focus();
  				return false;
  			}
  			if($("input[name='comployee']").val()==""||$("input[name='comployee']").val().length==0){
  				alert("员工不能为空");
  				$("input[name='comployee']").focus();
  				return false;
  			}
  		})

  	});

http://www.erman.cn/archives/169

    <div class="nav">

    	 <form id="loginid" name="login" onsubmit="" action="adds.jsp" method="post">
		 内容：
		 <input type="text" id="conid" name="content"  />
		 <br/>
		 公司名:
		 <input type="text" id="comid" name="company" />
		 <br/>
		 员工名:
		 <input type="text" id="empid" name="comployee" />
		 <br/>
		 <input type="submit" value="提交" />
		 </form>

    </div>

    <a href="javascript:history.go(-1)">返回上一页</a>
    <br/>


  	$(document).ready(function(){
  		$("#conid").focus();
  		$("form").submit(function(){
  			if($("input[name='content']").val()==""){
  				alert("内容不能为空");
  				$("input[name='content']").focus();
  				return false;
  			}
  			if($("input[name='company']").val()==""||$("input[name='company']").val().length==0){
  				alert("公司名不能为空");
  				$("input[name='company']").focus();
  				return false;
  			}
  			if($("input[name='comployee']").val()==""||$("input[name='comployee']").val().length==0){
  				alert("员工不能为空");
  				$("input[name='comployee']").focus();
  				return false;
  			}
  		})

  	});

http://www.erman.cn/archives/169

    <div class="nav">

    	 <form id="loginid" name="login" onsubmit="" action="adds.jsp" method="post">
		 内容：
		 <input type="text" id="conid" name="content"  />
		 <br/>
		 公司名:
		 <input type="text" id="comid" name="company" />
		 <br/>
		 员工名:
		 <input type="text" id="empid" name="comployee" />
		 <br/>
		 <input type="submit" value="提交" />
		 </form>

    </div>

    <a href="javascript:history.go(-1)">返回上一页</a>
    <br/>


		function check()
  		{
			if($("form input").eq(0).val()==""||$("form input").eq(0).val().length==0){
				alert("内容不能为空1");
				$("form input").eq(0).focus();
				return false;
			}
			if($("form input").eq(1).val()==""||$("form input").eq(1).val().length==0){
				alert("公司名不能为空");
				$("form input").eq(1).focus();
				return false;
			}
			if($("form input").eq(2).val==""||$("form input").eq(2).val().length==0){
				alert("员工不能为空");
				$("form input").eq(2).focus();
				return false;
			}

			return true;


  		}


 <form id="loginid" name="login" onsubmit="" action="adds.jsp" method="post">
		 内容：
		 <input type="text" id="conid" name="content"  />
		 <br/>
		 公司名:
		 <input type="text" id="comid" name="company" />
		 <br/>
		 员工名:
		 <input type="text" id="empid" name="comployee" />
		 <br/>
		 <input type="submit" value="提交" onclick="return check();"/>
		 </form>


  		function check()
  		{
			if($("#loginid input").eq(0).val()==""||$("#loginid input").eq(0).val().length==0){
				alert("内容不能为空1");
				$("#loginid input").eq(0).focus();
				return false;
			}
			if($("#loginid input").eq(1).val()==""||$("#loginid input").eq(1).val().length==0){
				alert("公司名不能为空");
				$("#loginid input").eq(1).focus();
				return false;
			}
			if($("#loginid input").eq(2).val==""||$("#loginid input").eq(2).val().length==0){
				alert("员工不能为空");
				$("#loginid input").eq(2).focus();
				return false;
			}

			return true;


  		}

<div class="nav">

    	 <form id="loginid" name="login" onsubmit="" action="adds.jsp" method="post">
		 内容：
		 <input type="text" id="conid" name="content"  />
		 <br/>
		 公司名:
		 <input type="text" id="comid" name="company" />
		 <br/>
		 员工名:
		 <input type="text" id="empid" name="comployee" />
		 <br/>
		 <input type="submit" value="提交" onclick="return check();"/>
		 </form>

    </div>