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中“+=”的应用
Feb 02 Javascript
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
悬浮广告方法日常收集整理
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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
linux iconv方法的使用
2011/10/01 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP7变量处理机制修改
2021/03/09 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
python实现简单socket通信的方法
2016/04/19 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
python中的句柄操作的方法示例
2019/06/20 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
PHP面试题附答案
2015/11/28 面试题
Ruby如何定义一个类
2012/10/08 面试题
中学运动会广播稿
2014/01/19 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
初中班干部工作总结
2015/08/10 职场文书