表单提交总结(一):表单的提交及验证方法

  关于表单提交,相信每个做过web开发的小伙伴,随随便便都能写出来。但是需求不同,采取的方法也会有所差别,每当遇到稍微复杂一点的提交问题,自己总会搜索一番资料,费时费力。在这里总结出一些常用的表单提交案例,方便日后查阅。

1.使用onsubmit方法进行验证.

  在提交表单之前,对表单或者网页中的数据进行检验。onsubmit指定的方法返回true,则提交数据;返回false不提交数据。
js验证方法:

function check(){
    var val = $("#name").val();
    if(val==null||val==''){
        alert("内容不能为空!");
        return false;
    }
    return true;
}

html表单:

 <form action="" onsubmit="return check();"> 
     <input type="text" id="name" value=""/>
     <input type="submit" value="submit"/>
 </form>

注意:

  1. onsubmit里一定要有return关键字,否则函数会直接执行,不返回。
  2. check一定要返回一个boolean类型的返回值
  3. 提交必须是submit类型的.

2.submit按钮上增加onclick事件.

  此功能类似于上面form标签中的onsubmit事件。
js验证方法:

function check(){
    var val = $("#name").val();
    if(val==null||val==''){
        return false;
    }
    return true;
}

html表单:

 <form action="" onsubmit="return check();"> 
     <input type="text" id="name" value=""/>
     <input type="submit" value="submit"     onclick="return check()"/>
 </form>

3.在button按钮上增加提交事件

  button上增加onclick=”submit();”,这时候form标签中的submit事件会失效,验证方法写在submit方法内。
  js验证方法:

function submit(){
    var val = $("#name").val();
    if(val==null||val==''){
        return false;
    }
    return true;
}

html表单:

 <form action="" onsubmit="return check();"> 
     <input type="text" id="name" value=""/>
     <input type="submit" value="submit" onclick="return submit()"/>
 </form>

注意:
  form表单里可以使用button标签替换submit(非ie浏览器)。

猜你喜欢

转载自blog.csdn.net/blq4411568/article/details/78389293