css 表单校验

html-css017

css 表单校验,第1张

1、:valid 用于匹配输入值为合法的元素

2、:invalid用于匹配输入值为非法的元素

3、required 属性规定必需在提交之前填写输入字段

4、pattern 属性规定用于验证输入字段的正则表达式

:valid/:invalid 选择器用于在表单元素中的值是合法/非法时设置指定样式。

注意: :valid/:invalid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max属性,及正确的 email 字段, 合法的数字字段等。

required 属性适用于以下 <input>类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。当然textarea也可以。

预览地址:

这时候点击提交,就好自动校验了,而且HTML5会直接添加Tips提示用户,请看下列示例(虽然样式不是很美观):

cstrike/gameinfo.txt is not a valid format

cstrike/gameinfo.txt 不是一个有效的格式

重新安装试试

$ 符号是来自 JS 库常用的 " selector " 意思。

例如 JQuery 里。

$ 就是 Selector 的缩写函数。

例子:

$(this)就是 " 选择现在这个 " 的意思。

if ( .)

如果 ( .)

$("#myform")

选择 #myform 物件,而 # 的意思是 id= 的缩写,全个意思就是 " 选择 id = myform 的物件

.valid()。

是一个名为 valid 的功能函数,回传 true 或是 false,作用是检查 #myform 物件是否验证成功

JavaScript库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导[1]致你的网页尺寸臃肿。在某些场合,如果你只想完成特定的工作,可以使用一些功能更专一的轻量库。

$fx()

一个用来让 HTML 对象运动的轻量库。你可以在一个时间轴上改变任何 CSS 属性,对于复杂动画,你可以将各种效果结合起来,将对象分组,让它们并行运动。

JSTweener

一个生成中间帧的 JavaScript 库,它的 API 类似著名的中间帧引擎 Tweener。你可以指定动画时间,定义切换效果以及时延。在几乎任何点都可以触动事件。

Facebook Animation

一个强大的,用来创建可定制的,基于 CSS 的动画。在 Facebook 动画中,几行代码就可以改善 UI。语法和 FBJS (用于 Facebook 的库)一样。

FX

一个语法类似 YUI 的轻量 JavaScript 库,可以为几乎任何 CSS 属性创建中间帧。支持颜色和滚动动画,为对象设置 to 和 from 值就可以了。