第一种方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form onsubmit="return func1()">                             // 这里的onsunbmit 在函数前面加了个RETRUN
        <input type="text" name="us" id="inp">
        <input type="submit" value="提交" id="sub">
    </form>
<script>
    var inp=document.getElementById("inp");

    function func1() {

        if (inp.value.length<5){                               // 判断输入框输入的如果大于5个字符就通过验证, inp.value 就是 us="" 的值
             alert("验证失败!");                   
              return false;
        }

    }
</script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------

第二种方法:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="form">                              // 找到form 标签
        <input type="text" name="us" id="inp">
        <input type="submit" value="提交" id="sub">
    </form>
<script>
    var inp=document.getElementById("inp");
    var ff=document.getElementById("form");    // 用绑定函数的方法 
    ff.onsubmit=function (ev) {
        if (inp.value.length<5){
            alert("验证失败!");
            event.preventDefault();            // 这里是阻止垃圾数据传入的方法
        }
    }
</script>
</body>
</html>

js 中 前端过滤数据到后端的方法的更多相关文章

  1. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  2. JS中 逻辑或 || 逻辑与 && 的使用方法总结

    JS中 逻辑或 || 逻辑与 && 的使用方法总结 //1.在if判断中 //if(1==1 || 2==3){}//->两个条件中只要有一个条件为真,整体就为真 "或 ...

  3. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  4. JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法

    JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...

  5. node.js中实现同步操作的3种实现方法

    这篇文章主要介绍了node.js中实现同步操作的3种实现方法,本文用实例讲解一些需要同步操作的情况下,如何编程实现,需要的朋友可以参考下 众所周知,异步是得天独厚的特点和优势,但同时在程序中同步的需求 ...

  6. JS中的forEach、$.each、map方法推荐

    下面小编就为大家带来一篇JS中的forEach.$.each.map方法推荐.小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 orEach是ECMA5中Array新方法中最 ...

  7. 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝

    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...

  8. js中常用追加元素的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 前端必备——js中前端与后台的数据交互全解

    只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...

随机推荐

  1. SqlServer给一个表增加多个字段语法

    添加字段语法 alter table table_name add column_name +字段类型+ 约束条件 给一个表增加多个字段: use NatureData go alter table ...

  2. 墨菲定律与 IndexOutOfBoundsException(数组越界异常)

    今天维护又反馈了一问题过来,查询试卷时报数组越界异常: 2017-02-28 10:45:24,827[ERROR] HttpException[10.32.111.7:60446:2D07867BE ...

  3. 处理json

    一.json json是一个字符串,只不过长得比较像字典.使用json函数需要导入json库,即import json json的格式只有双引号,不可用单引号 1.json.loads()和json. ...

  4. luoguP2664 树上游戏

    https://www.luogu.org/problemnew/show/P2664 考虑对于每种颜色包含的点和这些点的子节点建出虚树,发现只要将一个联通块中的东西 Dp + 差分一下就行了 当然要 ...

  5. [51nod]1229 序列求和 V2（数学+拉格朗日差值）

    题面 传送门 题解 这种颓柿子的题我可能死活做不出来-- 首先\(r=0\)--算了不说了,\(r=1\)就是个裸的自然数幂次和直接爱怎么搞怎么搞了,所以以下都假设\(r>1\) 设 \[s_p ...

  6. logging、hashlib、collections模块

    一.hashlib模块(加密模块) 1.什么叫hash:hash是一种算法(3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 , ...

  7. CF914E Palindromes in a Tree

    $ \color{#0066ff}{ 题目描述 }$ 给你一颗 n 个顶点的树(连通无环图).顶点从 1 到 n 编号,并且每个顶点对应一个在'a'到't'的字母. 树上的一条路径是回文是指至少有一个 ...

  8. Flask Web开发实战（入门、进阶与原理解析）

    URL重定向 错误响应 > 如果你想手动返回错误响应,可以使用Flask提供的abort()函数. XML 上下文全局变量 [](https://img2018.cnblogs.com/blog ...

  9. mysql 查询库中有几张表

    SELECT COUNT(*) TABLES, table_schemaFROM information_schema.TABLESWHERE table_schema = '999*999' 999 ...

  10. 正确优雅地解决用户退出——JSP及Struts解决方案

    摘要       在一个有密码保护的Web应用中,正确处理用户退出过程并不仅仅只需调用HttpSession的invalidate()方法.现在大部分浏览器上都有后退和前进按钮,允许用户后退或前进到一 ...