Javascript的表单与验证-非空验证


Posted in Javascript onMarch 18, 2016

推荐阅读:Javascript的表单验证长度

Javascript的表单验证-提交表单

Javascript的表单验证-初识正则表达式

Javascript的表单验证-揭开正则表达式的面纱

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

表单提交前要检查数据的合法性

在要对表单里的数据进行验证的时候,可以利用getElementById()来访问网页上任何一个元素

每个表单域都有一个form对象,可被传给任何验证表单数据的函数

<input id="zipcode" name="zipcode" type="text" size="5" onclick="showIt(this.form)"/>
function showIt(thisForm)
{
alert(thisForm["zipcode"].value);
//通过form对象的name属性,取得元素的值
}

利用name属性或getElementById()方法都可以完成对元素的获取

检查表单数据的时机,取决于选择正确的用户输入事件去处理。

也就是说,当用户输入数据后立即对数据验证。

用户在输入数据时的顺序是:

选择输入域

在域里输入数据

离开该域,移往下个目标

选择下个目标域

在域里输入数据

在这个过程中,会激发一系列的事件,利用这些事件,可以找到对数据验证的时机

1) 选中输入域时 ?激发onfocus事件(焦点)

2) 离开输入域时 ?激发onblur事件(离开焦点)

3) 离开该域并且输入内容发生改变时 ?激发onchange事件

最正确的选择是在激发onblur事件时去对数据进行验证

验证的第一步:检查域不为空

<input id="phone" name="phone" type="text" size="12" onblur="validateNonEmpty(this)"/>

调用validateNonEmpty来响应onblur事件

表单对象使用关键字this被传至函数

以下是验证函数

function validateNonEmpty(inputField)
{
if(inputField.value.length==0)
{
alert("Please enter a value.");
return false;
} 
return true;
}

在网页表单进行提交的时候,一定要对用户输入的数据进行验证

在要对表单里的数据进行验证的时候,可以利用getElementById()来访问网页上任何一个元素

以上内容是针对Javascript的表单与验证-非空验证的全部叙述,希望对大家有所帮助!

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
悬浮广告方法日常收集整理
Mar 18 #Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 #Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 #Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 #Javascript
javascript 继承学习心得总结
Mar 17 #Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 #Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 #Javascript
You might like
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
jquery插件validate验证的小例子
2013/05/08 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
python rsa 加密解密
2017/03/20 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
高三自我鉴定范文
2013/10/19 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
学生会工作感言
2015/08/07 职场文书
2016年春节问候语
2015/11/11 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书