JQuery使用教程-CSS-DOM/表单校验/正则表达式

1.5.5 CSS-DOM操作

除了使用之前讲过的css()方法获取或设置CSS样式以外，还可以使用jQuery提供的CSS-DOM操作方法，如下：

offset()示例：cssDom.jsp

以上通过offset()获取橘子所在节点的坐标，并通过offset([function(index,oldoffset)])设置新坐标。

运行结果：

单击按钮后，弹出“橘子”所在节点的位置：

再单击确定后，“橘子”向右下角偏移（向右、向下各偏移100px）：

offsetParent()示例：cssDom.jsp

运行结果：

单击后，父元素

的背景变色：

1.6表单校验

如果所有的数据校验都留给后台服务器完成，那么服务器的压力会非常大。一个解决方案，就是把表单数据的校验放到前台完成，也就是我们即将学习的表单校验。

使用jQuery或Javascript实现前台表单校验的总体步骤如下：

获取需要校验的表单元素的值，一般都是字符串类型的值

使用JQuery或JavaScript的相关字符串处理方法，对获取的表单元素值进行校验

当提交form表单时，触发onsubmit事件，对获取的数据进行验证

1.6.1使用字符串处理方法，对表单元素值校验

下面的check()方法，是一种常见校验方法的形式：

input.jsp

通过jQuery或JavaScript的字符串处理方法，对表单元素进行校验。校验时，如果不合法则返回false，如果合法则返回true。返回的布尔值，是为了以后使用onsubmit事件做准备。

经验：做表单校验时，只需要校验消极、负面、失败的情况，并返回false；最后在校验方法的最后一行返回true。

1.6.2校验事件和方法

check()方法写完以后，就需要被校验事件或校验方法调用，如下：

onsubmit事件示例：input.jsp

onsubmit事件会在单击submit按钮时被触发，如果onsubmit="returntrue"则会正常跳转到action指向的地址；如果onsubmit="return false"，则会终止action跳转。

例如，如果输入的表单内容不合法，就会弹出错误提示，并停留在当前页面而不进行action跳转，如图

而如果输入的表单数据全部合法，才会执行action跳转。

以上使用onsubmit实现的表单校验，等价于以下使用submit()方法：

submit()方法示例：input.jsp

1.6.3正则表达式

之前，我们是使用字符串处理方法或属性（如length、indexOf()）对表单元素进行校验。除此以外，对于一些复杂的校验，我们可以使用正则表达式来完成。

正则表达式所定义的校验规则，是写在/^…$/之中，其中具体的校验规则是通过以下符号来指定：

例如，11位手机号码（第一位必须是1）的正则表达式校验规则就是var regMobile=/^1\d$/;

有了正则校验规则后，就可以使用test()方法来执行校验。如果校验的内容和规则一致，则返回true；不一致，则返回false。

示例：

reg.jsp

运行结果：

如果输入的电话号码不符合正则表达式规则：

如果符合规则：

1.6.4表单选择器

jQuery专门提供了表单选择器，便于我们快速的获取form表单的元素值。表单选择器是过滤选择器的一种，具体如下：