JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

实例:1.用户名的非空验证代码如下:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> </style>
</head> <body>
<form action="aa.html" method="post"> <!--<form> 中的两个必要属性:action,method-->
用户名<input type="text" name="nn" id="nn" />
<input type="submit" value="登陆" id="b1" onclick= "return yz()" /> <!--onclick属性添加点击事件--> </form>
</body>
<script type="text/javascript">
function yz() //封装一个<body>中做成点击事件的函数
{
var nn = document.getElementById("nn"); //通过id名 找到 元素并重新 赋值
if(nn=="" || "null") //判断条件
{
alert("用户名不能为空"); //输出不满足条件的提示内容
return false;
}
else
{
return true; //满足条件时将执行表单的action
}
} </script>

当条件不满足时输出结果为:

当满足条件时,自动跳转页面。

实例2:相等验证,验证两次输入 的内容是否相同。

</head>

<body>
<form action="aa.html" method="post"> <!--<form> 中的两个必要属性:action,method-->
用户名<input type="text" name="nn" id="nn" />
密码:<input type="text" name="mm" id="mm" />
确认密码:<input type="text" name="qr" id="qr" />
<input type="submit" value="登陆" id="b1" onclick= "return yz()" /> <!--onclick属性添加点击事件--> </form>
</body>
<script type="text/javascript">
function yz() //封装一个<body>中做成点击事件的函数
{
var nn = document.getElementById("nn").value; //通过id名 找到 元素并重新 赋值
var mm = document.getElementById("mm").value;
var qm = document.getElementById("qr").value;
if(nn=="" || null) //判断条件
{
alert("用户名不能为空!"); //输出不满足条件的提示内容
return false;
}
else if(mm =="" || null)
{
alert("密码不能为空!");
return false;
}
else if(qr =="" || null)
{
alert("密码不能为空!");
return false;
}
else if(mm != qr)
{
alert("密码不一致!"); //两次输入密码不同时的提示内容
return false;
}
else
{
return true; //满足条件时将执行表单的action
}
} </script>

若两次输入的密码不同,弹出提示:

小结:有点小逻辑

JS-表单非空验证的更多相关文章

  1. iview 表单非空验证

    rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...

  2. 常用js表单文本域验证

    1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...

  3. .NET开源工作流RoadFlow-Bug修改-1.8.2表单验证时ueditor编辑非空验证无效

    RoadFlow生成的表单,Ueditor编辑器不能进行非空验证的BUG修改: 1.修改控制器:WorkFlowFormDesignerController红框处: 2.修改js文件:Scripts/ ...

  4. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  5. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  6. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

  7. JS表单原生验证器

    一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 仅仅是其中的一部分,因此少数服从多数,无 ...

  8. Js表单验证控件(使用方便,无需编码)-01使用说明

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  9. js表单验证处理和childNodes 和children 的区别

    一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...

随机推荐

  1. R 《回归分析与线性统计模型》page140,5.1

    rm(list = ls()) library(car) library(MASS) library(openxlsx) A = read.xlsx("data140.xlsx") ...

  2. SpringBoot#ConfigurationProperties注解相关的一些知识

    用途:ConfigurationProperties注解,用于在spring环境定义bean的时候.通过这个注解,把配置文件中的相关属性注入到实例化的bean中. 原理:spring中bean的生命周 ...

  3. C#知识点回顾随笔目录导航

    此随笔只是春节期间回顾知识点,阅读<<C#学习笔记>>记录(2019-2-4至2019...); 使用有道云笔记记录可能会有些排版问题 思维导图预览(使用的有道云,无法截取完整 ...

  4. 使用Hibarnate: 出现 java.sql.SQLException: ORA-00911: 无效字符, 解决思路

    1. 查看到: Hibernat自动生成的sql查询语句 Hibernate: select * from ( select module0_.MODULE_ID as MODULE_ID1_1_, ...

  5. springboot - 返回xml error 从自定义的 ErrorController

    1.概览 2.在<springboot - 返回JSON error 从自定义的 ErrorController>基础上,做如下调整: 1).新增Attribute类和Error类 pac ...

  6. Linux学习《第四章脚本》20200222

  7. Codeforces735D Taxes(哥德巴赫猜想)

    题意:已知n元需缴税为n的最大因子x元.现通过将n元分成k份的方式来减少缴税.问通过这种处理方式需缴纳的税费. 分析: 1.若n为素数,不需分解,可得1 2.若n为偶数,由哥德巴赫猜想:一个大于2的偶 ...

  8. 三十六、SAP的调试模式

    一.在执行界面,输入/h, 左下角会提示调试模式被激活 二.点击运行,就会跳出调试界面 三.调试界面用法

  9. Golang modules包依赖管理工具

    初始化 执行go mod  init module-name,其中module-name为包名字,执行完后会生成go.mod文件,如下 module module-name go 1.13 包管理 使 ...

  10. Ubuntu14.04 无法关机 SpamAssassin speech-dispatcher

    在ubuntu14.04上安装完一些包后,关闭计算机就会出现关于标题中的两个错误. 1.在软件中心卸载spamAssassin 2.运行命令: sudo update-rc.d -f speech-d ...