Java Script基础(十一) 表单验证
一、表单验证的必要性:
表单验证在客户端和服务器端,客户端验证实际是直接调用JavaScript脚本对用户输入的数据进行验证;而服务器也同样可以实现数据验证,但是当服务器压力过大时,资源损耗会比较严重,用户体验也不够好。所以通常验证我们大多数都会在客户端实现,这样可以降低服务器的压力,让服务器做其他更重要的事情。
二、表单验证的内容:
1、验证表单内容是否为空。
2、验证是否为数字。
3、验证电子邮件格式。
4、验证数据是否在某个范围以内。
5、验证用户输入的内容长度是否足够。
以上是表单验证中常见的验证规则,还有一些其他规则,需要我们根据实际需要自己编写验证规则。
三、表单元素常用属性、方法和事件:
属性:
id:返回文本框的id
value:返回文本框的值
方法:
blur():从文本框中移开焦点
focus():让文本框获取焦点
select():选择文本框内容
事件:
onblur():失去焦点时触发
onfocus():获取焦点时触发
onkeypress():按下键盘并松开
通过以上的事件和方法可以设置表单元素验证的时机,比如当失去焦点或者按下键盘内容就直接验证,这样用户体验更好,不需要用户点击提交按钮才实现验证。
Java Script基础(十一) 表单验证的更多相关文章
- es6 封装一个基础的表单验证
1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...
- jQuery基础之表单验证
在使用jquery-validate.js插件时可以做一些初始化配置在初始化jquery-validate.js对象的时候,将外部的一些配置和该插件内部的一些默认配置合并在一起,如果有相同的配置,前者 ...
- 网络安全从入门到精通 (第二章-6) 后端基础PHP—表单验证
本文内容: 什么是表单? 如何创建一个表单: 接收并验证: PHP和数据库交互 1,什么事表单? 表单在网页中主要负责数据采集. 表单由三部分组成: 表单标签:这里面包含了处理表单数据所用动态脚本的U ...
- java工具类(二)之java正则表达式表单验证
java正则表达式表单验证类工具类(验证邮箱.手机号码.qq号码等) 这篇文章主要介绍了java使用正则表达式进行表单验证工具类,可以验证邮箱.手机号码.qq号码等方法,需要的朋友可以参考下. jav ...
- python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- FormValidator表单验证
所需的库文件 红色框内是所需要的JavaScript库文件. <%@ page language="java" contentType="text/html; ch ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- Laravel教程 七:表单验证 Validation
Laravel教程 七:表单验证 Validation 此文章为原创文章,未经同意,禁止转载. Laravel Form 终于要更新这个Laravel系列教程的第七篇了,期间去写了一点其他的东西. 就 ...
- html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
随机推荐
- react native listview 一个有用的属性,用作两列布局
contentContainerStyle:设置listview包裹内容的属性 <ListView contentContainerStyle={{flexDirection:'row',fle ...
- android进度条的使用
// 导入按钮事件 btnsearch.setOnClickListener(new View.OnClickListener() { @Override public void on ...
- iOS开发-UIColor转UIIamge方法
只能说太神奇了,完美应用到我的毕业设计 - (UIImage*) createImageWithColor: (UIColor*) color { CGRect rect=CGRectMake(,,s ...
- HTML第六天学习笔记
今天主要对思维导图笔记进行了整理与更新:
- aix-裸设备文件大小查看
1.使用lsvg 查看有哪些vg 2.使用lsvg myvg VOLUME GROUP: myvg VG IDENTIFIER: 00f7563100004c000000013e5f8a53fa VG ...
- cocos2dx 手势识别
转自:http://blog.csdn.net/qq634416025/article/details/8685187 g_rGemertricRecognizer = new GeometricRe ...
- Java常见排序算法之直接插入排序
在学习算法的过程中,我们难免会接触很多和排序相关的算法.总而言之,对于任何编程人员来说,基本的排序算法是必须要掌握的. 从今天开始,我们将要进行基本的排序算法的讲解.Are you ready?Let ...
- 【6】连续序列和为s
题目:输入一个整数s,打印出全部和为s的连续整数序列(至少含有2个数).比如输入9,则输出2.3.4和4.5两个序列 方案一:因为序列至少要2个数,则两个数上限值为(1+s)/2,我们能够枚举该序列的 ...
- Windows创建自动化任务
Windows创建自动化任务使得开机就打开相应的Python目录 1:计算机管理 2:找到任务计划程序 3:创建基本任务 4:任务触发器 5: 建立bat执行文件 start "" ...
- Python 基础语法
Python 基础语法 Python语言与Perl,C和Java等语言有许多相似之处.但是,也存在一些差异. 第一个Python程序 E:\Python>python Python 3.3.5 ...