• 【 js 片段 】如何组织表单的默认提交?【亲测有效】


    最近做的一个项目,我分到的部分有表单验证。点击了提交按钮,但我并不想让他跳转页面去提交。于是经过各种百度,各种 stackoverflow,各种抱大神腿之后,有了以下解决办法:

    重点就是阻止 form 的 submit() 默认提交行为,一种方法用 return false,另一种是 event.preventDefault(); 两种方法都可以,但却又有不同,要根据你的实际情况选择。有什么不同呢,看完文章就告诉你。

    首先 html 里 code 如下:

     1 <!doctype html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>form</title>
     6 </head>
     7 <body>
     8     <form action="www.baidu.com" method="post" id="myForm" novalidate> //novalidate是为了防止 HTML5 表单执行原生的校验,从而只执行你自定义的验证。
     9         <input type="name" id="name" required>
    10         <input type="submit" value="submit">
    11     </form>
    12 
    13     <script src="scripts/jquery.min.js"></script>
    14     <script src="scripts/demo.js"></script>
    15 </body>
    16 </html>

    js 里 code 如下:

    1 $('#myForm').submit(function(event){
    2     if (!$('#name').val()) {
    3     alert('name 不能为空');
    4     event.preventDefault();
    5     };
    6 })

    当表格 name 的值为空时,弹出提示框,并阻止跳转。代码演示:http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview

    当然你也可以用 return false 来阻止,代码如下:

    1 $('#myForm').submit(function(event){
    2     if (!$('#name').val()) {
    3     alert('name 不能为空');
    4     return false;
    5     };
    6 })

    代码演示:http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f?p=preview

    如果你用的是什么 angularjs 框架之类的,只需要往这个代码上加 ng-controller 、ng-app 之类的就可以了。

    最后说一下 return false  和 event.preventDedault() 的区别:如果你在阻止了表单的提交行为之后,还想干点别的,那就用 event.preventDefault(),比如给空 input 加一个红色边框提醒用户之类的,因为 return false 之后的代码不会执行。如果什么也不想干,那两者就没有区别了,由你任性!

    红色边框代码:

    1 $('#myForm').submit(function(event){
    2     if (!$('#name').val()) {
    3     alert('name 不能为空');
    4     event.preventDefault();
    5     $('#name').css('border-color','red');
    6     }
    7 })

    ps:event.preventDefault();是个什么鬼?http://www.w3school.com.cn/jsref/event_preventdefault.asp

    看什么?!评论关注啊!

  • 相关阅读:
    java 原子量Atomic举例(AtomicReference)
    Android 用LinkedList实现队列
    Android常用组件,太全了
    java io系列20之 PipedReader和PipedWriter
    Android ExecutorService 的理解与使用
    Android Thread.setDaemon设置说明
    Hadoop HDFS编程 API入门系列之简单综合版本1(四)
    Hadoop HDFS编程 API入门系列之合并小文件到HDFS(三)
    Hadoop HDFS编程 API入门系列之路径过滤上传多个文件到HDFS(二)
    Hadoop HDFS编程 API入门系列之从本地上传文件到HDFS(一)
  • 原文地址:https://www.cnblogs.com/lijiayi/p/formSubmit.html
Copyright © 2020-2023  润新知