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 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
alert和confirm功能介绍
May 21 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php中上传文件的的解决方案
2018/09/25 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Python 开发Activex组件方法
2009/11/08 Python
python利用微信公众号实现报警功能
2018/06/10 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python可视化text()函数使用详解
2020/02/11 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
大学生应聘求职信
2014/05/26 职场文书
与美同行演讲稿
2014/09/13 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
教师师德考核自我评价
2014/09/13 职场文书
大学军训的体会
2014/11/08 职场文书
2015小学师德工作总结
2015/07/21 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers