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 相关文章推荐
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
用js闭包的方法实现多点标注冒泡示例
May 29 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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中的Base62类(适用于数值转字符串)
2013/08/12 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP xpath()函数讲解
2019/02/11 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python Zmail模块简介与使用示例
2020/12/19 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
C语言面试题
2013/05/19 面试题
自我鉴定的范文
2013/10/03 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
网络技术专业求职信
2014/02/18 职场文书
审计专业自荐信范文
2014/04/21 职场文书
财务会计专业求职信
2014/06/09 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
新娘婚礼致辞
2015/07/27 职场文书
记者节感言
2015/08/03 职场文书