form表单验证失败，阻止表单提交

效果演示：

贴上完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(function(){

    $("#btn").click(function(){

        var t=$("#text").val().length;

        if(t<=10){

            alert("长度不够！！")

        }else{

            $(this).prop("type","submit");

        }

    });

});

</script>

</head>

<body>

    <form action="http://www.baidu.com" method="post">

        <input type="text" id="text" />

        <input type="button" value="提交查询" id="btn"/>

    </form>

</body>

</html>

原理：验证#test内容长度是否大于等于10，true：弹窗长度不够，false：设置input按钮的类型为submit，即可跳转到百度，button这个属性验证成功无法跳转到action请求页面，只有submit按钮才可以

form表单验证失败，阻止表单提交的更多相关文章

  1. H5: 表单验证失败的提示语

    前言     前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...

  2. ASP.NET MVC 客户端验证失败后表单仍然提交问题

    客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...

  3. ElementUi 表单验证失败后 页面滚动到表单验证失败位置

    1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...

  4. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  5. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  6. element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配

    整体思路: 1:利用element-ui的栅格实现小分辨率和大分辨率的适配 2:模拟一组数据,从中筛选出 绑定各个表单值的对象   以及生成验证规则对象 3:在script标签内 .data()外,自 ...

  7. 五十四：WTForms表单验证之自定义表单验证器

    如果想要对表单中的某个字段进行自定义验证,则需要对这个字段进行单独的验证1.定义一个方法,命名规则为:validate_字段名(self, filed)2.在方法中,使用filed.data获取字段的 ...

  8. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  9. 转：MVC2表单验证失败后，直接返回View，已填写的内容就会清空，可以这样做；MVC2输出文本;MVC2输出PDF文件

    ViewData.ModelState.AddModelError("FormValidator", message); foreach (string field in Requ ...

随机推荐

  1. C# SqlBulkCopy类批量导入数据

    特别注意  sqlbulkcopy.ColumnMappings.Add(dt.Columns[i].ColumnName, dt.Columns[i].ColumnName); 插入的时候列的顺序可 ...

  2. iOS开发之 AES+Base64数据混合加密与解密

    2016-04-08 09:03 编辑: liubinqww 分类:iOS开发 来源:liubinqww 投稿 4 889     "APP的数据安全已经牵动着我们开发者的心,简单的MD5/ ...

  3. MySQL视图概述

    1.介绍 在传统关系型数据库里,视图有时也被称作虚表,是基于特定SQL结果集的虚拟数据表.在有些场合会变得很方便,例如:原有系统重构,旧的数据表A和B已经被拆分和合并到数据表C.D.F里面,为了实现平 ...

  4. PHP-Manual的学习----【序言】

    2017年6月27日16:57:32 学习资料:2015-PHP-Manual 打好坚实的基础是做任何事的前提 序言: 笔记: 1.PHP,即"PHP: Hypertext Preproce ...

  5. We7的区县站点群建设策略

    一．解决门户和委办局.乡镇的互动 构建以区县政府门户为主站,各委办局.乡镇为子站的站点群体系: 基于统一的信息体系,实现分级授权.统一管理的功能.各网站能够有独立的页面展现和管理后台,同一时候网站之间 ...

  6. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  7. 【BZOJ2006】[NOI2010]超级钢琴 ST表+堆

    [BZOJ2006][NOI2010]超级钢琴 Description 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以 ...

  8. Sumdiv(较难数学题)

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 20971   Accepted: 5290 Description Cons ...

  9. Computer Transformation(简单数学题+大数)

    H - Computer Transformation Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d &am ...

  10. iOS设备获取总结

    1.获取iOS设备的各种信息 // 这个方法后面会列出来 NSString *deviceName = [self getDeviceName]; NSLog(@"设备型号-->%@& ...