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 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
JS 5种遍历对象的方式
Jun 16 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代码
2012/07/17 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
浅析Python中的for 循环
2016/06/09 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python对象的属性访问过程详解
2020/03/05 Python
keras 多任务多loss实例
2020/06/22 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
最新远光软件笔试题面试题内容
2013/11/08 面试题
Delphi笔试题
2016/11/14 面试题
财务助理岗位职责
2013/11/10 职场文书
总经理工作职责范文
2014/03/14 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
师德演讲稿范文
2014/05/06 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
网络营销实训总结
2015/08/03 职场文书