第一种方法:

<!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. 【bzoj1009】: [HNOI2008]GT考试 字符串-kmp-矩阵乘法-DP

    [bzoj1009]: [HNOI2008]GT考试 先用kmp写个暴力 /* http://www.cnblogs.com/karl07/ */ #include <cstdlib> # ...

  2. linux 常用端口【转载】

    原文地址: http://blog.csdn.net/u013943420/article/details/65938696 一个计算机最多有65535个端口,端口不能重复.这65536个端口被分为两 ...

  3. root@localhost

    root代表当前的用户 也就是说你使用root的帐号登录的localhost是系统的名字 没有设置系统名字的时候默认名称是localhost/ 代表你当前所处的目录位置 你当前在根目录下# 是用户提示 ...

  4. SHELL编程之case与函数

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

  5. python之常用的数据类型

    1. 变量的定义以及声明 在学习变量之前,咱们需要知道变量的命名规则: ① 变量必须由数字字母下划线构成,如a_1 ② 变量名不能以数字开头,如1a ③ 需要遵循驼峰命名法 给变量赋值通常采用“=”, ...

  6. plot over time

    先选择监测点 最后输出,由于所有数据都被输出,因此需要等待久一点 可以勾选需要的值,记得更换勾选变量后再次点击apply 最后的效果: 最后可以把数据写出来做后处理 输出后的数据:

  7. Linux之旅（二）

    上一章讲到,mysql 安装遇到问题 ...莫名其妙好了,此处已回想不起为什么好了,只得跳过. 六.安装php7 参考教程[ http://www.thinkphp.cn/topic/48196.ht ...

  8. 【算法笔记】B1006 换个格式输出整数

    1006 换个格式输出整数 (15 分) 让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n(<10),换个格式来输出任一个不超过 3 位的正整数 ...

  9. 移动端bug和优化

    1.字体兼容bug 描叙:ios默认字体和andriod不一样,需要设置html的默认字体样式例子:font-family: PingFang-SC-Regular,Helvetica,sans-se ...

  10. centos 7 禅道bug管理软件部署

    2018-10-26 部署前置条件 关闭防火墙或者添加防火墙规则,使禅道端口可以通过防火墙 关闭防火墙与selinux 临时关闭防火墙 systemctl stop firewalld 永久防火墙开机 ...