zoukankan      html  css  js  c++  java
  • 在表单提交前进行验证的几种方式

    1在button的submit事件时判断

    <button type="submit">提交</button>  
    ("#form").bind("submit",function(){
        var txt_firstname = $.trim($("#firstname").attr("value"));
    
        var isSuccess = 1;//默认验证通过
        if(txt_firstname.length == 0){  
            $("#firstnameLabel").text("firstname不能为空!")  
            $("#firstnameLabel").css({"color":"red"});  
            isSuccess = 0;  //验证不通过,修改isSuccess
       }  
        if(isSuccess == 0){
            return false;//最后未通过,不提交   
        }
    })

    2 在form的onsubmit判断

    <form id="form" method="post" action="/DealWithForm/" onsubmit="return check()">
    function check(){  
        var txt_firstname = $.trim($("#firstname").attr("value"));  
    
        var isSuccess = 1;  
        if(txt_firstname.length == 0)  
        {  
            $("#firstnameLabel").text("firstname不能为空!")  
            $("#firstnameLabel").css({"color":"red"});  
            isSuccess = 0;  
        }  
    
        if(isSuccess == 0){  
            return false;  
        } 
        return true;  
    }  

    注意:onsubmit=“return false”为不执行提交;onsubmit=“return true”或onsubmit=“return ”都执行提交。

    3 去掉submit类型button,直接用普通button.

    <button type="button" onclick="checktosubmit()">提交</button>  
    function checktosubmit(){  
        var txt_firstname = $.trim($("#firstname").attr("value"));
          
        var isSuccess = 1;  
        if(txt_firstname.length == 0)  
        {  
            $("#firstnameLabel").text("firstname不能为空!")  
            $("#firstnameLabel").css({"color":"red"});  
            isSuccess = 0;  
        }  
        if(isSuccess == 1)  
        {  
            form.submit();  
        }  
    }

     原文链接:http://blog.csdn.net/qian_f/article/details/9631691

  • 相关阅读:
    thrift java first demo
    找工作的一些感悟——前端小菜的成长
    常见标签的默认属性值及相互作用——关于CSS reset的思考
    CSS清浮动处理(Clear与BFC)
    简单JavaScript模版引擎优化
    最简单的JavaScript模板引擎
    JavaScript正则表达式下——相关方法
    JavaScript 正则表达式上——基本语法
    node.js调试
    node.js module初步理解
  • 原文地址:https://www.cnblogs.com/alexandra/p/5560048.html
Copyright © 2011-2022 走看看