一、表单验证的必要性:

  表单验证在客户端和服务器端,客户端验证实际是直接调用JavaScript脚本对用户输入的数据进行验证;而服务器也同样可以实现数据验证,但是当服务器压力过大时,资源损耗会比较严重,用户体验也不够好。所以通常验证我们大多数都会在客户端实现,这样可以降低服务器的压力,让服务器做其他更重要的事情。

二、表单验证的内容:

  1、验证表单内容是否为空。

  2、验证是否为数字。

  3、验证电子邮件格式。

  4、验证数据是否在某个范围以内。

  5、验证用户输入的内容长度是否足够。

  以上是表单验证中常见的验证规则,还有一些其他规则,需要我们根据实际需要自己编写验证规则。

三、表单元素常用属性、方法和事件:

  属性:

  id:返回文本框的id

  value:返回文本框的值

  方法: 

  blur():从文本框中移开焦点

  focus():让文本框获取焦点

  select():选择文本框内容

  事件:

  onblur():失去焦点时触发

  onfocus():获取焦点时触发

  onkeypress():按下键盘并松开

  通过以上的事件和方法可以设置表单元素验证的时机,比如当失去焦点或者按下键盘内容就直接验证,这样用户体验更好,不需要用户点击提交按钮才实现验证。

  

  

Java Script基础(十一) 表单验证的更多相关文章

  1. es6 封装一个基础的表单验证

    1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...

  2. jQuery基础之表单验证

    在使用jquery-validate.js插件时可以做一些初始化配置在初始化jquery-validate.js对象的时候,将外部的一些配置和该插件内部的一些默认配置合并在一起,如果有相同的配置,前者 ...

  3. 网络安全从入门到精通 (第二章-6) 后端基础PHP—表单验证

    本文内容: 什么是表单? 如何创建一个表单: 接收并验证: PHP和数据库交互 1,什么事表单? 表单在网页中主要负责数据采集. 表单由三部分组成: 表单标签:这里面包含了处理表单数据所用动态脚本的U ...

  4. java工具类(二)之java正则表达式表单验证

    java正则表达式表单验证类工具类(验证邮箱.手机号码.qq号码等) 这篇文章主要介绍了java使用正则表达式进行表单验证工具类,可以验证邮箱.手机号码.qq号码等方法,需要的朋友可以参考下. jav ...

  5. python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  6. FormValidator表单验证

    所需的库文件 红色框内是所需要的JavaScript库文件. <%@ page language="java" contentType="text/html; ch ...

  7. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. Laravel教程 七:表单验证 Validation

    Laravel教程 七:表单验证 Validation 此文章为原创文章,未经同意,禁止转载. Laravel Form 终于要更新这个Laravel系列教程的第七篇了,期间去写了一点其他的东西. 就 ...

  10. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. CodeForces 710B Optimal Point on a Line (数学,求中位数)

    题意:给定n个坐标,问你所有点离哪个近距离和最短. 析:中位数啊,很明显. 代码如下: #pragma comment(linker, "/STACK:1024000000,10240000 ...

  2. Android 显示/隐藏 应用图标

    PackageManager packageManager = getPackageManager(); ComponentName componentName = new ComponentName ...

  3. hdoj 5373 The shortest problem

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5373 一开始想到用整除11的性质去做,即奇位数的和和偶位数的和的差为11的倍数,但估不准数据范围没敢去 ...

  4. 动态链接--so的搜索过程

    可执行文件所依赖的so路径保存在.dynamic 里面,由DT_NEED类型表示.如下: 如果DT_NEED里面保存的是绝对路径,那ld就在绝对路径下查找so. 如果DT_NEED里面保存的是相对路径 ...

  5. Spring REST实践之客户端和测试

    RestTemplate 可参考spring实战来写这部分. RestTemplate免于编写乏味的样板代码,RestTemplate定义了33个与REST资源交互的方法,涵盖了HTTP动作的各种形式 ...

  6. libevent库的使用方法

    接写一个很简单的 Time Server 来当作例子:当你连上去以后 Server 端直接提供时间,然后结束连线.event_init() 表示初始化 libevent 所使用到的变数.event_s ...

  7. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

  8. C#实现XML文件数据库存储

    C#实现文件数据库 http://www.cnblogs.com/gaochundong/archive/2013/04/24/csharp_file_database.html#3100076 应用 ...

  9. C++的优秀特性4:指针

    (转载请注明原创于潘多拉盒子) 其实指针不是C++的特性,而是地地道道的C的特性.有人说C++继承了C的指针,实在是败笔,造成内存泄漏云云,纯粹是不懂.可以这么说,如果没有指针,C++会逊色很多,应用 ...

  10. CMSIS RTOS -- embOS segger

    #ifndef __CMSIS_OS_H__ #define __CMSIS_OS_H__ #include <stdint.h> #include <stddef.h> #i ...