zoukankan      html  css  js  c++  java
  • jquery 验证表单

    1、为了减轻后台压力,可以利用JavaScript在表单提交前对表单数据进行验证。

    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Example1</title>  
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>  
      
    <script type="text/javascript">  
    function jump()  
    {  
        //清空表单所有数据  
       // document.getElementById("firstname").value=""  
       // document.getElementById("lastname").value=""  
        $("input[name=firstname]").val("") 
        $("input[name=lastname]").val("") 
        $("#firstnameLabel").text("")  
        $("#lastnameLabel").text("")  
    }  
      
    $(document).ready(function(){  
        $("#form1").bind("submit", function(){  
            
            var txt_firstname = $.trim($("input[name=firstname]").val()) 
             
            var txt_lastname = $.trim($("input[name=lastname]").val())  
      
            var isSuccess = 1;  
            if(txt_firstname.length == 0)  
            {  
                $("#firstnameLabel").text("firstname不能为空!")  
                $("#firstnameLabel").css({"color":"red"});  
                isSuccess = 0;  
            }  
            if(txt_lastname.length == 0)  
            {  
                $("#lastnameLabel").text("lastname不能为空!")  
                $("#lastnameLabel").css({"color":"red"});  
                isSuccess = 0;  
            }  
            if(isSuccess == 0)  
            {  
                return false;  
            }  
            })  
        })  
    </script>  
    </head>  
    <body>  
    提交表单前进行验证(方法一)  
    <hr width="40%" align="left" />  
    <form id="form1" method="post" action="/DealWithForm1/">   
    <table>  
    <tr>  
    <td>first_name:</td>  
    <td><input name="firstname" type="text"  /></td>  
    <td><label id="firstnameLabel"></label></td>  
    </tr>  
    <tr>  
    <td>last_name:</td>  
    <td><input name="lastname" type="text"  /></td>  
    <td><label id="lastnameLabel"></label></td>  
    </tr>  
    </table>  
    <hr width="40%" align="left" />  
    <button type="submit">提交</button>  
    <button type="button" onclick="jump();">取消</button>  
    </form>  
    </body>  
    </html>  
  • 相关阅读:
    手机端上传图片及java后台接收和ajaxForm提交
    JEECG中datagrid方法自定义查询条件
    微信分享到朋友圈按钮 右上角提示
    Js获取后台集合List的值和下标的方法
    redis系列之数据库与缓存数据一致性解决方案
    替换{0}为指定的字符串(MessageFormat)
    java中对array数组的常用操作
    面试题-Java Web-网络通信
    你应该知道的JAVA面试题
    各大互联网公司java开发面试常问问题
  • 原文地址:https://www.cnblogs.com/trustnature/p/3227355.html
Copyright © 2011-2022 走看看