第一种方法:

<!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. Promise超时情况

    export const ERROR_PROMISE_TIMEOUT = 'ERROR_PROMISE_TIMEOUT'; export default function (promise, time ...

  2. 入参为json类型的接口测试示例

    一.接口文档内容 二.使用postman(入参为json类型) 如下部分内容即是json串: { "name":"刘星", "grade": ...

  3. django中如何建立抽象型数据库作为父模块可继承其功能

    先建立抽象数据库 from django.db import models class BaseModel(models.Model): """为模型类补充字段" ...

  4. 题解 CF520E 【Pluses everywhere】

    题目链接 ps:可能组合数一不小心打错了,请发现的大佬提出,谢谢. 我们来讨论每一位数$a_{i}$被算了多少次. 总共有$n-1$个空位可以放$'+'$所以,$a_{i}$左边有$i-1$个空位,右 ...

  5. mysql的innodb自增主键为什么不是连续的

    图1 图1中是表t原有的数据,这个时候我们执行show create table t会看到如下输出,如图二所示现在的自增值是2,也就是下一个不指定主键值的插入的数据的主键就是2 图2 Innodb引擎 ...

  6. SHELL编程之case与函数

    一.case语句概述 使用case语句改写if多分支可以使脚本结构更加清晰.层次分明 针对变量不同取值,执行不同的命令序列 case语句结构如下: case 变量值  in 模式1) 命令序列1 ;; ...

  7. 【算法】关于图论中的最小生成树(Minimum Spanning Tree)详解

    本节纲要 什么是图(network) 什么是最小生成树 (minimum spanning tree) 最小生成树的算法 什么是图(network)? 这里的图当然不是我们日常说的图片或者地图.通常情 ...

  8. Linux系统管理之硬盘管理

    硬盘是计算的重要组成部件之一,硬盘为操作系统提供持久话存储的功能,在Linux硬盘设备的性能和好坏可能关系到生成线的安全和用户体验等等.熟练的掌握硬盘管理相关的信息能让我们处理起这些问题来得心应手. ...

  9. 老男孩python作业5-开发一个简单的python计算器

    开发一个简单的python计算器 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568 ...

  10. windows 下 redis 安装

    百度下载 windows 版本 的 redis... 解压 安装为windows服务 安装命令: redis-server.exe --service-install redis.windows.co ...