jQuery Validate 插件

jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

1.首先,如果我们没有jquery.validata.js那就需要下载了。  点击神赐下载链接

2.创建运行环境,也就是引入我们所需要的插件。

<script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>

3.写HTML内容,创建一个form表单

<form id="demoForm">
            <p>
                <label for="user">username:</label>
                <input type="text" name="username" id="user"/>
            </p>
            <p>
                <label for="pass">password:</label>
                <input type="password" name="password" id="pass"/>
            </p>
            <p>
                <label for="age">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:</label>
                <input type="text" name="age" id="age"/>
            </p>
            <p>
                <label for="post">postcode:</label>
                <input type="text" name="PostCode" id="post"/>
            </p>
            <input type="submit" value="提交" id="btn"/>
        </form>

效果如下:

4.编辑js代码

<script type="text/javascript">
            $(function  () {
                //用来绑定所需操作的form表单
                $(‘#demoForm‘).validate({
                    rules:{       //返回元素验证规则
                        //绑定元素的name值
                        username:{
                            required:true,    //设置为必填选项
                            rangelength:[3,6]//最小长度和最大长度
                        },
                        password:{//绑定元素的name值
                            required:true,    //设置为必填选项
                            rangelength:[6,12]//最小长度和最大长度
                        },
                        age:{     //绑定元素的name值
//                            min:18,          //最小值
//                            max:999,         //最大值
                            range:[18,999],  //最小值和最大值
                            rangelength:[1,3],//最小长度和最大长度
                            digits:true      //正整数
                        },
                        PostCode:{  //绑定元素的name值
                            required:true,   //设置为必填选项
                            PostCode:true    //自定义验证
                        }
                    },
                    //验证错误时的提示
                    messages:{
                        username:{     //绑定元素的name值
                            required:‘此项必填‘,    //提示的错误信息
                            rangelength:‘用户名长度为3-6位‘        //提示的错误信息
                        },
                        password:{     //绑定元素的name值
                            required:‘此项必填‘ ,          //提示的错误信息
                            rangelength:‘用户名长度为6-12位‘       //提示的错误信息
                        },
                        age:{     //绑定元素的name值
                            range:‘年龄必须是18--999之间‘,//提示的错误信息
                            rangelength:‘1~3位数‘,       //提示的错误信息
                            digits:‘年龄必须是正整数‘     //提示的错误信息
                        },
                        PostCode:{ //绑定元素的name值
                            required:‘此项必填‘        //提示的错误信息
                        }
                    },
                    //当表单通过验证执行的操作
                    submitHandler:function  () {
                        alert("校验全部通过")
                    },
                    //当未通过验证的表单提交时执行的操作
                    invalidHandler:function () {
                        alert("no");
                    }
                });

                //自定义一个表单验证
                $.validator.addMethod(‘PostCode‘,function(value){
                    var reg=/^[0-9]{6}$/;
                    return reg.test(value);
                },‘必须是邮编格式的‘)
            })
        </script>

效果图如下:

好了,这就是使用jQuery Validate的步骤 。代码中也有一些简单的验证属性 。

如需仔细了解   来戳我!戳我啊

时间: 2024-11-03 21:45:13

jQuery Validate 插件的相关文章

jQuery Validate 插件,表单验证功能

连接地址:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jör

jQuery Validate插件 reomte用法详解

在用户注册时经常要通过ajax请求判断用户账号是否已注册,最方便的方法便是用jQuery Validate插件 reomte方法 Jquery Validate插件, 调用远程方法验证参数, remote的用法: 在validate的方法上加入remote:"校验方法",例如:remote: "/test/checkAccount.jsp", 这时传进checkAccount.jsp的参数就是account=$("#account").val()

jQuery Validate插件实现表单强大的验证功能

转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 第一节:jQuery Validation让验证变得如此容易 一.官网下载jquery,和jquery validation plugin 二.引入文件 <script src="js/jquery-1

使用JQuery.Validate插件来校验页面表单有效性

使用JQuery.Validate插件来校验页面表单有效性?1. [代码] 常见的注册表单元素 <form action="#" method="post"  id="regist">     <table cellpadding="0" cellspacing="0" border="0" class="form_table">      

前端验证,jquery.validate插件

jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是

jquery validate插件高级表单验证

Validation(validate)插件提供了另一种方法来为一个表单添加验证,而不需要改变字段的HTML.此外,这个插件提供了广泛的附加选项来控制它如何工作.我们通过给validate()函数传递一个对象直接量来设置这些选项,其中包含了每个选项的单独对象.例如,要指定一条验证规则,我们包含了该规则的代码的一个对象.首先,紧跟着validation函数的第一个圆括号的后面,我们包含一个开始花括号,并且在函数的结束圆括号的前面,放置一个结束花括号. $('idOfForm').validate(

(转)jquery.validate插件的使用

JQuery Validate使用总结:一.导入js库<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script> 二.默认校验规则(1)required:true 必输字段(

[转]jQuery.validate插件在失去焦点时执行验证代码

转:http://my.oschina.net/enyo/blog/311566 关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证.看手册后发现默认是在表单提交时执行验证代码. 手册中提到使用 onfocusout:false 来解决失去焦点时验证的参数功能,但是经测试无效果. 可以使用函数手工验证: 1 $("#signupForm").validate({ 2 onfocusout: function(element){ 3 $(element).va

表单验证神器——jquery.validate插件

jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l