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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
JavaScript实现网页计算器功能
Oct 29 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实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
node.js 如何监视文件变化
2020/09/01 Javascript
用Python抢过年的火车票附源码
2015/12/07 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
高级电工工作职责
2013/11/21 职场文书
毕业生自荐信格式
2014/03/07 职场文书
法人代表授权委托书
2014/04/08 职场文书
主持人开幕词
2015/01/29 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
Python进行区间取值案例讲解
2021/08/02 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript