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>  
  • 相关阅读:
    青魔法圣堂法术 Django的技术栈(持续更新)
    青魔法圣堂法术 Django REST framework (DRF) 框架(持续更新)
    Python无法卸载的解决办法
    Django开发social-auth-app-django 第三方登陆
    【转载】青魔法圣堂法术Django项目知识点汇总
    基于session 的springMvc 国际化
    java导出生成csv文件
    mybatis + log4j 打印mybatis的sql
    spring Mvc + Mybatis 中使用junit
    spring官网项目
  • 原文地址:https://www.cnblogs.com/trustnature/p/3227355.html
Copyright © 2011-2022 走看看