Javascript的表单与验证-非空验证
推荐阅读: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的表单与验证-非空验证的全部叙述,希望对大家有所帮助!
相关推荐
-
简单的js表单验证函数
网站制作中,表单验证的功能是很常用的.有些时候,用一些成型的js控件会比较方便,但是又过于庞大和难以维护(本人的js水平不高)所以干脆自己写了一个.至于好不好,灵活不灵活,还请大家指点(先上图,很难看,请不要介意): 代码: 复制代码 代码如下: 表单验证js代码 var fv ={ lang: "zh-cn", //错误提示语言 inValidedStr: "=", //初始随意复制,使其长度不为0 mail: function(elemen
-
Extjs表单常见验证小结
复制代码 代码如下: //放在onReady的function(){}中 Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息. Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为: qtip-当鼠标移动到控件上面时显示提示; title-在浏览器的标题显示,但是测试结果是和qtip一样的; under-在控件的底下显示错误提示; side-在控件右边显示一个错误图标,鼠
-
js用正则表达式来验证表单(比较齐全的资源)
在学习网页中的表单验证,顺便学习下正则表达式 在网上找了后发现了一个比较齐全的资源,稍微进行了一下排版 复制代码 代码如下: // 检查是否为有效的真实姓名,只能含有中文或大写的英文字母 function isValidTrueName(strName){ var str = Trim(strName); //判断是否为全英文大写或全中文,可以包含空格 var reg = /^[A-Z u4E00-u9FA5]+$/; if(reg.test(str)){ return false; } ret
-
jquery表单验证插件(jquery.validate.js)的3种使用方式
jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq
-
javascript制作的简单注册模块表单验证
一个注册框 进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar
-
AngularJS实现表单验证
虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
-
javascript表单验证使用示例(javascript验证邮箱)
被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目?用户输入的邮件地址是否合法?用户是否已输入合法的日期?用户是否在数据域 (numeric field) 中输入了文本?必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): 复制代码 代码如下: function validate_required(field
-
Javascript的表单与验证-非空验证
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,可以利用getElementById()来访问网页上任何一个元素 每个表单域都有一个form对象,可被传给任何验证表单数据的函数 <input id=&qu
-
Javascript的表单验证-揭开正则表达式的面纱
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 在上篇文章给大家介绍了javascript的表单验证-初识正则表达式,本文给大家介绍Javascript的表单验证-揭开正则表达式的面纱,具体详情请看全文. 用元字符匹配相应的字符类型 创建正则表达式有点像创建字符串字面量,只不过正则表达式出现在一对"/"里 正则表达式中会用到一级元字符,用于连接字母与数字 "." 匹配任何字符,除
-
Javascript的表单验证-提交表单
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name
-
javascript实现表单验证
本文实例讲解了javascript实现表单验证的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <script type="text/j
-
JavaScript 基础表单验证示例(纯Js实现)
验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo
-
Javascript的表单验证长度
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 该采用什么样的方式对用户作出提醒呢?你一定不想用alert()提示框 在输入域后加一个sqan标签 <input id="phone" name="phone" type="text" size="12" onBlur="validateNonEmptyFun(this,document.getElementById(
-
JavaScript实现表单验证功能
本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下 以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码. 关于正则表达式的使用,以及常用的正则表达式,笔者目前还在整理中,后期整理完成后,会将链接放在下面,供大家一起学习. //1.声明变量 var emailObj; var usernameObj; var passwordObj; var confirmObj; var emailMsg; var userna
-
Javascript的表单验证-初识正则表达式
推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 验证日期 日期的格式相对特别,不能光凭其长度来验证 常见的日期格式:先以两位数表示日,再以两位数表示月,最后以四位数表示年,期间以斜线分隔. MM/DD/YYYY 博主:怎样设计出验证日期是否符合格式的代码呢? 先来看一下验证日期格式的逻辑吧 将表单域中的值取出,
-
JavaScript判断表单为空及获取焦点的方法
本文实例讲述了JavaScript判断表单为空及获取焦点的方法.分享给大家供大家参考,具体如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <meta http-equiv="Content
-
jQuery实现批量判断表单中文本框非空的方法(2种方法)
本文实例讲述了jQuery实现批量判断表单中文本框非空的方法.分享给大家供大家参考,具体如下: 方法一: <script type="text/javascript"> /* * 批量验证表单非空 * 需要非空验证控件的样式class="mustadd" */ $(".mustadd").each(function(){ if($(this).val() == ''){ alert("该项不可为空!"); $(th
随机推荐
- 用hta做的好玩的小程序(固定在桌面)
- mybatis 项目配置文件实例详解
- 使用JS组件实现带ToolTip验证框的实例代码
- 对SpringMVC的@RequestParam的解释
- 关于Spring Boot和Kotlin的联合开发
- iOS中的UISearchBar搜索框组件基础使用指南
- OpenStack安装部署Liberty Neutron
- Asp.Mvc 2.0用户的编辑与删除实例讲解(5)
- 在Windows8上的搭建Python和Django环境
- 用js实现上传图片前的预览(TX的面试题)
- 微信公众平台开发-微信服务器IP接口实例(含源码)
- Javascript中的arguments与重载介绍
- Ruby中的public、private、protected区别小结
- JavaScript原型继承之基础机制分析
- C# DataSet的内容写成XML时如何格式化字段数据
- 详解如何使用Node.js编写命令工具——以vue-cli为例
- 浅析tr的隐藏和显示问题
- Nginx Gzip模块启用和配置指令详解
- Android开发自学笔记(四):APP布局下
- Python实现多线程HTTP下载器示例