表单选择器

:input(匹配所有input、textarea、select和button元素)

 

:text(匹配所有单行文本框)

 

:password(匹配所有密码框)

 

:radio(匹配所有单项按钮)

 

:checkbox(匹配所有复选框)

 

:submit(匹配所有提交按钮)

 

:image(匹配所有图像域)

 

:reset(匹配所有重置按钮)

 

:button(匹配所有按钮)

 

:file(匹配所有文件域)

 

:hidden(匹配所有不可见元素,或者type为hidden的元素)

 

          表单属性过滤器

语法

描述

实例

:enabled

匹配所有可见元素

:disabled

匹配所有不可用元素

:checked

匹配所有被选中元素(复选框,单项按钮,select中的option)

:selected

匹配所有选中的option元素

 

表单验证常用的方法和事件

事件:onblur:失去焦点,当光标离开某个文本框时触发

Onfocus:获取焦点,当光标进入某个文本框时触发

方法:blur()从文本域移开焦点

Focus()在文本域中设置焦点,即获得光标

Select()获取文本域中的内容,突出显示输的区域的内容

 

文本输入提示特效示例

$(myform:text).focus(function(){

If($(this).val()==请输入正确的电子邮箱){

$(this).val(“”);

$(this).css(border,1px solid #ff0000);

}

})

什么是正则表达式

正则表达式是一个描述字符模式的对象,它是由一些特殊符号组成的,这些特殊符号和在SQL server中学过的通配符一样

RegExp对象是Regular Expression(正则表达式)的缩写,验证(电子邮箱地址,电话号码,身份证号等字符串)

定义正则表达式有两种形式:一种是普通方式,另一种是构造函数的方式

普通方式:

Var reg=/表达式/附加参数

附加参数有三个参数:

g:代表可以进行全局匹配

I:代表不区分大小写匹配

m:代表可以进行多行匹配

构造函数

Var reg =new RegExp(“表达式”,”附加参数”)

表示式的模式分为简单模式和复合模式

正则表达式的常用字符

  • /../代表模式的开始和结束
  • ^匹配字符串的开始
  • $匹配字符串的结束
  • \s任何空白字符
  • \S任何非空白字符
  • \d匹配一个数字字符等价于[0-9]
  • \D除了数字之外的任何字符,等价于[^0-9]
  • \w匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9]
  • \W任何非字字符,等价于[^A-Za-z0-9]
  • .除了换行符之外的任意字符

正则表达式的重复字符

{n}匹配前一项n次

{n,}匹配前一项n次,或者多次

{n,m}匹配前一项至少n次,但不能超过m次

次,或者多次,等价于{0,}

次,或者多次,等价于{1,}

次,也就是说前一项是可选的,等价于{0,1}

Web前端表单验证的更多相关文章

  1. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. Web开发-表单验证

    表单验证是Web开发中必不可少的一个环节,用来限制用户输入数据的规范和一致性.那么如何能够简化这一任务,让开发人员通过简单的属性设置就能达到目的呢? FineUI在这一点上也是下足了功夫,比Asp.N ...

  3. (七)JavaScript之[调试]与[前端表单验证]

    12].调试为什么要去调试?1.在编写JavaScript时,如果没有调试工具将是一件很痛苦的事情.2.没有调试工具是很难去编写JavaScript程序的.3.编写的代码可能包含语法错误.逻辑错误,如 ...

  4. Java web 之表单验证

    按照软件工程师的定位来讲,表单验证应该要好好练习的 html  javascript

  5. jQuery简单前端表单验证

    <!DOCTYPE html> <html> <head> <title>表单验证</title> <script src=" ...

  6. 前端表单验证常用的15个JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  7. 最常用的15个前端表单验证JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  8. Web前端——表单提交和Js添加选项

    表单 表单提交 表单提交之后会将表单的数据以get或post方式,传送到action要打开的页面 方式1: 使用提交按钮 <form action="" method=&qu ...

  9. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

随机推荐

  1. 用webpack实现前端自动化构建

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  2. Oracle 完整性约束错误

     错误Caused by: org.hibernate.exception.ConstraintViolationException: Could not execute JDBC batch upd ...

  3. 从golang-gin-realworld-example-app项目学写httpapi (五)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/middlewares.go 中间件 ...

  4. cache2go开源项目的回调方法使用

    https://github.com/muesli/cache2go 结构体 type CacheTable struct { sync.RWMutex . name string items map ...

  5. Scratch3.0——项目层次结构

    原文地址:https://blog.csdn.net/weiwoyonzhe/article/details/86603757 简要介绍: 本文旨在介绍scratch3.0项目层次结构及关键功能. 源 ...

  6. P2DR模型

    P2DR模型是可适应网络安全理论或称为动态信息安全理论的主要模型.P2DR模型是TCSEC模型的发展,也是目前被普遍采用的安全模型.P2DR模型包含四个主要部分:Policy(安全策略).Protec ...

  7. August 18th 2017 Week 33rd Friday

    If you shed tears when you miss the sun, you also miss the stars. 如果你因为错过太阳而哭泣,你也将会错过繁星. If you have ...

  8. codeforces 497E Subsequences Return

    codeforces 497E Subsequences Return 想法 做完这题,学了一些东西. 1.求一个串不同子序列个数的两种方法.解一 解二 2.这道题 \(n\) 很大,很容易想到矩阵加 ...

  9. Linux基础入门 - 2

    第三节 用户及文件权限管理 3-1.Linux用户管理 Linux 是一个可以实现多用户登陆的操作系统,他们共享一些主机的资源,但他们也分别有自己的用户空间,用于存放各自的文件.但实际上他们的文件都是 ...

  10. [attribute |= value] 与 [attribute ^= value],[attribute ~= value] 与 [attribute *= value] 的联系与区别

    [attribute |= value] 与 [attribute ^= value] 的联系与区别: 一.联系: 1. 两个选择器的 attribute 属性值等于 value 时都可以匹配 < ...