您的位置：首页 > Web前端 > HTML

Html form 表单提交前验证

2016-08-07 23:26 363 查看


Html form 表单提交前验证

可以使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。
onsubmit指定的方法返回true，则提交数据；返回false不提交数据。
直接看下面的代码：

1

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'login.jsp' starting page</title>

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

  </head>

  

  <body>

  <form action="addBook.action"  onsubmit="return MyValidata()">

  <table align="center" border="1">

    <tr>

    <td>书名</td>

    <td><input id="name" name="book.name"/></td>

    </tr>

    <tr>

    <td>作者</td>

    <td><input name="book.author"/></td>

    </tr>

    <tr>

    <td>出版社</td>

    <td><input name="book.publish"/></td>

    </tr>

    <tr>

    <td>出版日期</td>

    <td><input name="book.publishdate"/></td>

    </tr>

     <tr>

    <td>页数</td>

    <td><input name="book.page"/></td>

    </tr>

     <tr>

    <td>价格</td>

    <td><input name="book.price"/></td>

    </tr>

     <tr>

    <td>内容</td>

    <td><input name="book.content"/></td>

    </tr>

    <tr align="center">

    <td colspan="2">

    <input type="submit" value="提交"/>

    <input type="button" onclick="fanhui()" value="返回"/>

    </td>

    

    </tr>

    </table>

     

    </form>

    <script type="text/javascript">

    $("#name").focus(function(){

    var name=$('#name').val()

    if(name=="账号不能为空"){

    $("#name").val("")

    }

    })

    

    function MyValidata(){

    var name=$('#name').val()

    name=$.trim(name)

    if(1>name.length){
$("#name").val("账号不能为空")

    return false;

    }else{

    return true;

    }

   

    }

    

    

    

    function fanhui(){

    window.location.href="getAllBook.action";

    }

    </script>

  </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航