当前位置:Gxlcms > JavaScript > jquery实现表单验证简单实例演示_jquery

jquery实现表单验证简单实例演示_jquery

时间:2021-07-01 10:21:17 帮助过:4人阅读

本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

直接上插件实现代码了,围绕代码进行讲解比较容易点:


  

先来说一说实现原理:

首先定义好正则,和相应的提示信息,

  加上自定义check属性,

  然后获取check属性的值,多个值用空格分开。利用split()将其拆分为数组,在逐个调用check()方法进行验证。

  之后通过验证的返回值来确定显示的信息。

这里有两个验证是比较特别的,就是:

1.验证是否为空 (required)

2.两次密码是否一致 (pwd2)

这两个都没有用到正则,因为根本就用不上。 两次密码是否一致 ,单独写了个方法 pwdEqual();

插件里的验证正则我只写了几个 ,如果不够用可以自行扩展添加。

扩展只需3步:

1.添加正则,

2.添加相应提示信息,

3.check()方法中添加相应 case 处理

插件使用说明:

  1.给表单下要进行验证的文本框,密码框 ,多行文本框加上自定义check属性

  2.多个格式验证用空格间隔,如(同时验证必填和邮箱): check="required email"

  3.如果要验证两次密码是否一致,则pwd1和pwd2一起使用,如下图:

pwd1存储第一次输入的值,pwd2存储第二次输入的值,如果你只用pwd1还好,但如果只用了pwd2,则验证是始终无法通过的。

下面给出DEMO示例代码:




  表单验证插件


  
  

示例效果图片:

示例代码,成功提交是会跳转到success.html页面的,因此你要自己创建个success.html,里面可以什么都不写。

但是,只要有一个验证不通过,就不会成功跳转。

另外,你或许还需要2张图片:

//图片路径
img_error: "img/error.gif",
img_success: "img/success.gif",

上传在这了,自己右键另存为吧。

以上就是本文的全部内容,希望能够帮助大家找更好的掌握jquery验证码的实现方法。

人气教程排行