JS-表单非空验证
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-表单非空验证的更多相关文章
- iview 表单非空验证
rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...
- 常用js表单文本域验证
1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...
- .NET开源工作流RoadFlow-Bug修改-1.8.2表单验证时ueditor编辑非空验证无效
RoadFlow生成的表单,Ueditor编辑器不能进行非空验证的BUG修改: 1.修改控制器:WorkFlowFormDesignerController红框处: 2.修改js文件:Scripts/ ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
- JS表单原生验证器
一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部流行的框架,如bootstrap,由于我负责的模块 仅仅是其中的一部分,因此少数服从多数,无 ...
- Js表单验证控件（使用方便，无需编码）-01使用说明
演示地址:http://weishakeji.net/Utility/Verify/Index.htm 开源地址:https://github.com/weishakeji/Verify_Js ...
- js表单验证处理和childNodes 和children 的区别
一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...
随机推荐
- xcode windows版安装使用教程
随着iPhone.iPad.Mac等苹果产品越来越火爆,越来越多的初学者想要了解和尝试苹果平台,包括苹果操作系统Mac OS X.苹果演示软件Keynote.苹果开发工具Xcode等.然而,苹果电脑价 ...
- 关于AlertDialog多选框中全选和反选的实现办法
package mobile.android.ch07.multi.choice.dialog; import android.app.Activity; import android.app.Ale ...
- 微信小程序—页面跳转
问题: 实现页面跳转:index页面通过按钮跳转到next页面 方法: 1.页面index.wxml增加一个按钮 // index.wxml <button bindtap="jump ...
- uboot前传
1.uboot到底是干嘛的 uboot主要作用是用来启动操作系统内核. uboot还要负责部署整个计算机系统. uboot中还有操作Flash等板子上硬盘的驱动. uboot还得提供一个命令行界面供人 ...
- java核心-多线程(4)-线程类基础知识
1.并发 <1>使用并发的一个重要原因是提高执行效率.由于I/O等情况阻塞,单个任务并不能充分利用CPU时间.所以在单处理器的机器上也应该使用并发. <2>为了实现并发,操作系 ...
- 7.10 Varnish 优化
- manjaro更换深度桌面 卸载ked桌面
下载需要的桌面环境 pacman -S deepin deepin-extra 修改/etc/lightdm/lightdm.conf sudo nano /etc/lightdm/lightdm.c ...
- Spark的任务提交和执行流程概述
1.概述 为了更好地理解调度,我们先看一下集群模式的Spark程序运行架构图,如上所示: 2.Spark中的基本概念 1.Application:表示你的程序 2.Driver:表示main函数,创建 ...
- Golang的基础数据类型-浮点型
Golang的基础数据类型-浮点型 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.浮点型概述 Go语言提供两种精度的浮点数,即float32和float64,其中float32 ...
- VMware Workstation上新建虚拟机
准备开始,话不多少,直接上图 点击创建新的虚拟机或者在文件上面选择新建虚拟机 点击完成就可以了 后面的步骤,是在公司电脑上完成的,新建了一个CentOs1,步骤同上,后面继续,然后需要更改配置,点击虚 ...