多语言展示
当前在线:1265今日阅读:154今日分享:43

jQuery Validate验证插件使用步骤教程

网页中常见的表单,在用户输入数据之后,点击提交到服务器时,需要验证用户输入的数据是否符合规则和条件,如果这些验证都需要自己通过编写js代码来实现,即繁琐又容易出现代码重复和冗余,下面介绍jQuery-Validate的使用,可以解决以上问题,让我们开发的表单能够轻松灵活的验证,大大提供程序员的工作效率
工具/原料
1

jQuery

2

jQuery-Validate插件

方法/步骤
1

首先下载jquery-validation插件,然后解压,把需要的引入到项目中的几个文件拷贝出来

2

一般需要以下几个文件:jquery.min.js(因为这个插件是基于jquery的,所以首先要引入jquery库文件)jquery.validate.min.js(validate插件)messages_zh.js(中文信息文件,如果需要支持英文或其它语言,引入对应的资源文件)additional-methods.js(附加的验证方法,如自定义的验证方法,可以写入到这个文件中)将以上几个文件拷贝到项目的资源文件目录下()

3

将以上文件引入到页面中,这个是关键,不引入是看不到测试效果的。

4

完整的测试例子代码        用户信息                       

   
        用户基本信息       

                               

       

                               

       

                               

       

                               

       

                               

       

                   

   

5

表单内容都不填,直接点击提交按钮,可以看到表单右侧出现红色的提示信息,提示请输入内容

6

现在测试下输入错误内容的情况下,提示的内容信息。年龄限制必须是整数,密码必须是6位及以上,验证密码必须和上面的密码一致,邮箱必须是正确的格式

注意事项

validate的js库文件引入顺序也要注意,jquery.min.js要放在第一位,jquery.validate.min.js第二位,否则会报错

推荐信息