位置: 编程技术 - 正文
jquery实现表单验证简单实例演示(jquery的validate前端表单验证)
编辑：rootadmin推荐整理分享jquery实现表单验证简单实例演示(jquery的validate前端表单验证)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery做表单验证,jquery的validate前端表单验证,jquery表单事件验证表单,jquery的validate前端表单验证,jquery实现表单验证,jquery表单验证实验报告,jquery实现表单验证,jquery实现表单验证,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了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表单验证大全》 ，欢迎大家学习阅读。
上一篇：jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法(jquery 选中)
下一篇：jquery自定义表格样式(jquery自定义组件)
