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表单的元素值。表单选择器是过滤选择器的一种,具体如下:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180629A0A5TL00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券