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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 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.ini中文版(2)
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JQuery插件开发示例代码
2013/11/06 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python的一些用法分享
2012/10/07 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
python实现分页效果
2017/10/25 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
如何使用python操作vmware
2019/07/27 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python如何定义接口和抽象类
2020/07/28 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
实习教师自我鉴定
2013/12/12 职场文书
学习雷锋主题班会
2015/08/14 职场文书
婚礼答谢词范文
2015/09/29 职场文书