表单验证

简介: 表单验证

一、表单选择器:

用于选取某些特定的表单元素

二、常用的表单选择器:

1.:input,选取所有的textarea,button,input,select元素

eg:( " : i n p u t " ) . c s s ( " b o r d e r " , " 1 p x s o l i d r e d " ) ; 2. t e x t 选 取 所 有 的 单 行 文 本 框 e g : (":input").css("border","1px solid red"); 2.text选取所有的单行文本框 eg:(":input").css("border","1pxsolidred");2.texteg:(":text").css(“border”,“1px solid red”);

3.password获取所有的密码框

eg:( &quot; : p a s s w o r d &quot; ) . c s s ( &quot; b o r d e r &quot; , &quot; 1 p x s o l i d r e d &quot; ) ; 4. : r a d i o , 获 取 所 有 的 单 选 按 钮 5. : c h e c k b o x , 获 取 所 有 的 复 选 框 6. : s u b m i t , 获 取 所 有 的 提 交 按 钮 7. : i m a g e , 获 取 所 有 的 图 像 标 签 8. : r e s e t , 获 取 所 有 的 重 置 按 钮 9. : b u t t o n , 获 取 所 有 的 按 钮 10. : f i l e , 获 取 所 有 的 文 件 域 11. : h i d d e n , 获 取 所 有 的 隐 藏 域 , 包 括 d i s p l a y : n o n e 。 三 、 属 性 过 滤 选 择 器 : 1. : e n a b l e d , 匹 配 所 有 的 可 用 元 素 2. : d i s a b l e d , 匹 配 所 有 不 可 用 的 元 素 3. : c h e c k e d , 匹 配 所 有 被 选 中 的 元 素 4. : s e l e c t e d , 匹 配 所 有 的 元 素 四 、 使 用 S t r i n g 对 象 验 证 : 1. i n d e x O f ( ) : 在 字 符 串 中 查 找 指 定 的 字 符 。 如 果 找 到 , 返 回 下 标 , 否 则 返 回 − 1 。 e g : i f ( e m a i l . i n d e x O f ( &quot; . &quot; ) &lt; 0 ∣ ∣ e m a i l . i n d e x O f ( &quot; @ &quot; ) &lt; 0 ) a l e r t ( &quot; 邮 箱 格 式 不 正 确 &quot; ) ; 2. l e n g t h : 获 取 字 符 串 的 长 度 。 e g : i f ( e m a i l . l e n g t h &lt; 6 ) a l e r t ( &quot; 密 码 不 能 小 于 6 位 &quot; ) ; 3. s u b s t r i n g : 截 取 字 符 串 。 4. i s N a N : 判 断 该 字 符 串 是 否 是 数 字 。 如 果 是 数 字 的 话 返 回 f a l s e , 否 则 返 回 t r u e e g : i s N a N ( s t r ) ; 五 、 检 验 提 示 特 效 : 1. b l u r ( ) : 光 标 失 去 焦 点 2. f o u c s ( ) : 光 标 聚 焦 3. s e l e c t ( ) : 选 中 表 单 中 的 文 本 六 、 正 则 表 达 式 : 描 述 字 符 模 式 的 对 象 , 由 一 些 特 殊 的 符 号 组 成 七 、 正 则 表 达 式 的 优 点 : 1. 简 介 的 代 码 2. 严 谨 的 验 证 文 本 框 的 内 容 八 、 正 则 表 达 式 的 书 写 : 1. 普 通 方 式 : v a r r e g = / c c / 附 加 参 数 ; 其 中 : 附 加 参 数 有 : ( 1 ) g : 全 局 匹 配 ( 2 ) i : 不 区 分 大 小 写 匹 配 ( 3 ) m : 换 行 匹 配 2. 构 造 函 数 : v a r r e g = n e w R e g E x p ( &quot; 表 达 式 &quot; , &quot; 附 加 参 数 &quot; ) ; 九 、 正 则 表 达 式 的 常 用 符 号 : 1. / … … / : 表 达 式 的 开 始 和 结 束 2 . : 字 符 串 的 开 始 3. (&quot;:password&quot;).css(&quot;border&quot;,&quot;1px solid red&quot;); 4.:radio,获取所有的单选按钮 5.:checkbox,获取所有的复选框 6.:submit,获取所有的提交按钮 7.:image,获取所有的图像标签 8.:reset,获取所有的重置按钮 9.:button,获取所有的按钮 10.:file,获取所有的文件域 11.:hidden,获取所有的隐藏域,包括display:none。 三、属性过滤选择器: 1.:enabled,匹配所有的可用元素 2.:disabled,匹配所有不可用的元素 3.:checked,匹配所有被选中的元素 4.:selected,匹配所有的元素 四、使用String对象验证: 1.indexOf():在字符串中查找指定的字符。如果找到,返回下标,否则返回-1。 eg:if(email.indexOf(&quot;.&quot;)&lt;0||email.indexOf(&quot;@&quot;)&lt;0){ alert(&quot;邮箱格式不正确&quot;); } 2.length:获取字符串的长度。 eg:if(email.length&lt;6){ alert(&quot;密码不能小于6位&quot;); } 3.substring:截取字符串。 4.isNaN:判断该字符串是否是数字。如果是数字的话返回false,否则返回true eg:isNaN(str); 五、检验提示特效: 1.blur():光标失去焦点 2.foucs():光标聚焦 3.select():选中表单中的文本 六、正则表达式: 描述字符模式的对象,由一些特殊的符号组成 七、正则表达式的优点: 1.简介的代码 2.严谨的验证文本框的内容 八、正则表达式的书写: 1.普通方式: var reg = /cc/附加参数; 其中:附加参数有: (1)g:全局匹配 (2)i:不区分大小写匹配 (3)m:换行匹配 2.构造函数: var reg = new RegExp(&quot;表达式&quot;,&quot;附加参数&quot;); 九、正则表达式的常用符号: 1./……/:表达式的开始和结束 2.^:字符串的开始 3.(":password").css("border","1pxsolidred");4.:radio,5.:checkbox,6.:submit,7.:image8.:reset,9.:button,10.:file,11.:hidden,display:none:1.:enabled,2.:disabled,3.:checked,4.:selected使String1.indexOf():1eg:if(email.indexOf(".")<0email.indexOf("@")<0)alert("");2.length:eg:if(email.length<6)alert("6");3.substring:4.isNaN:false,trueeg:isNaN(str);1.blur():2.foucs():3.select():1.2.1.varreg=/cc/;1g:2i:3m:2.varreg=newRegExp("","");1.//2.:3.:字符串的结尾

4.\s:任何空白字符(空格 tab制表符)

5.\S:任何非空白字符

6.\d:匹配一个数字字符

7.\D:匹配一个非数字字符

8.\w:数字、下划线、字母

9.\W:除了数字、下划线和字母以外的

10…除了换行符以外的任意字符。

十、正则表达式中重复的字符:

1.{n}:匹配n次

2.{n,}:n次或者多次

3.{n,m}:至少n次,但是不能超过m次

4.*:0次或者多次

5.+:1次或者多次

6.?:0次或者1次

相关文章
|
9月前
|
JavaScript 前端开发 安全
表单处理:使用 Vue 进行表单验证和提交
【4月更文挑战第22天】Vue 提供了便捷的表单组件和验证规则,支持实时用户输入验证和错误消息显示,确保数据正确性。通过封装验证逻辑和处理异步验证,增强代码复用和安全性。同时,关注用户体验,如清晰的指示和错误反馈,防止 CSRF 攻击,实现高效、安全的表单处理。
115 1
layUI表单验证不生效的问题
layUI表单验证不生效的问题
229 1
|
9月前
|
移动开发 前端开发 JavaScript
Vue3中表单相关的知识:表单绑定、表单验证、表单处理
Vue3中表单相关的知识:表单绑定、表单验证、表单处理
292 0
ElementUI之CUD+表单验证
ElementUI之CUD+表单验证
61 0
|
前端开发 关系型数据库 API
关于一篇ElementUI之CUD+表单验证
关于一篇ElementUI之CUD+表单验证
72 0
62EasyUI 表单 - 表单验证
62EasyUI 表单 - 表单验证
51 0
|
前端开发
你对layui的弹出层表单进行表单验证了解多少呢?
我们在项目中使用**layui**做前端的时候,就少不了表单**form**,但也有时候我们会使用**layui**的弹出层`layer.open`,来做一个弹出层表单,该弹出层有自己的**btn**(确定,取消按钮等等),那么如何对弹出层的表单做一个表单验证呢?
722 1
你对layui的弹出层表单进行表单验证了解多少呢?
|
JavaScript 前端开发
EasyUI之表单验证
当我们开发一个管理类项目的时候,EasyUI是我常用的一个jquery框架,而表单验证显然是我们必须要实现的功能,而使用基于EasyUI的验证功能就比较简便了,本文来介绍下具体的用法
EasyUI之表单验证
|
前端开发 JavaScript 数据安全/隐私保护
Jquery表单验证
用JQuery实现添加用户(用户注册登录同理)表单验证功能
Jquery表单验证