jQuery validate插件

一、导入js库

先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。

注意Validate的导入要在jQuery库之后。代码如下：

    <script src="jQuery.1.8.3.js" type="text/javascript"></script>

    <script src="jquery.validate.js" type="text/javascript"></script>

   <!--  因为默认是用英文输出错误信息，如果导入下面包就可以默认用中文输出错误信息 -->

    <script src="messages_zh.js" type="text/javascript"></script>

二、常见默认校验规则

(1)、required:true               必输字段

(2)、email:true                  必须输入正确格式的电子邮件

(3)、url:true                    必须输入正确格式的网址

(4)、number:true                 必须输入合法的数字(负数，小数)

(5)、digits:true                 必须输入整数

(6)、creditcard:true             必须输入合法的信用卡号

(7)、equalTo:"#password"         输入值必须和#password相同

(8)、accept:                     输入拥有合法后缀名的字符串（上传文件的后缀）

(9)、maxlength:5                 输入长度最多是5的字符串(汉字算一个字符)

(10)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)

(11)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(12)、range:[5,10]               输入值必须介于 5 和 10 之间

(13)、max:5                      输入值不能大于5

(14)、min:10                     输入值不能小于10

三.submit提交校验案例

（1）register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 <script type="text/javascript" src="../js/jquery-1.7.1.js"></script>

 <script type="text/javascript" src="../js/jquery.validate.min.js"></script>

 <!-- 上面两个导入就可以，下面这个自己写一个校验规则 -->

 <script type="text/javascript" src="../js/register.js"></script>

<html>

<head>

    <style type="text/css" rel="stylesheet">

        .wrap{margin:0 auto;width:500px;}

        .palceholder{ border:solid 1px red;}

    </style>

</head>

    <body>

        <div class="wrap">

          <h1>注册</h1>

            <form action="" id="form_register">

                <p>用 户 名: <input type="text" name="name" /></p>

                <p>密   码: <input type="text" name="password" /></p>

                <p>确认密码: <input  type="text" name="password1" /></p>

                <p>电子邮件: <input  type="text" name="emal" /></p>

                <p>年    龄: <input  type="text" name="age" /></p>

                <p>爱    好：<select name="hobby" id="hobby">

                            <option value="">请选择</option>

                            <option value="1">唱歌</option>

                            <option value="2">跳舞</option>

                            <option value="3">画画</option>

                        </select>

                </p>

                <input type="submit" value="submit提交">

                <input type="submit" value="button提交" id="hand" name="hand">

            </form>

        </div>

    </body>

</html>

先看界面效果：很普通的一个界面

(2)register.js

/*首先校验要在$(document).ready()里加入验证规则与错误提示位置*/

$(document).ready(function(){

     $("#form_register").validate({

            
      debug:true,//如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

        // 错误提示

         rules:{

             name:{required:true},

             password:{required:true},

             password1:{required:true,equalTo: "#password"},

             emal:{required:true},

             //这里要注意select有个小细节，就是默认的"请选择"的value一定要是"",如果你设置了"-1",那它就默认有值，而不去校验

             hobby:{required:true},

             age:{required:true,digits:true},

         },

         messages:{

             name:{required:"请输入用户名"},

             password:{required:"请输入密码"},

             password1:{required:"请输入密码",equalTo: "两次密码输入不一致"},

             emal:{required:"请输入电子邮箱"},

             hobby:{required:"请选择爱好"},

             age:{required:"请输入年龄",digits:"必须为整数"},

         },

          /*

               下面这个很关键：

            error：错误信息

            element：指当前元素

          */

         errorPlacement:function(error, element){

             //我往当前元素添加class属性，然后对这个css样式设置，这样就可以更加清晰显示错误

             element.addClass('palceholder');

             //添加placeholder属性，属性值就是error.html()

             element.attr({placeholder:error.html()});

         }

     });

    });

(3)当我在界面上点击submit提交的时候看界面

通过样式可以让错误信息更明显

如果我在register.js错误显示方式修改如下：

errorPlacement:function(error, element){

             element.addClass('palceholder');

             //默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面

             error.appendTo(element.parent());

         }

     });

看界面效果：

四.用button提交

我们知道，很多时候我们需要button进行ajax提交，在网上都是这样写：

$("#btn).click(function(){

if($("#form").valid()){

......

}

//本人亲自测试当button提交时这里的$("#form").valid()是不行，会报错

找了好多博客发现有一个是可以的，下面进行代码演示，其它都和上面一样，就register.js我重新写一个

$(document).ready(function(){

$("#hand").bind("click" ,function(){

    //编写表单验证函数validform，在验证按钮注册按钮点击事件内调用验证函数对象

    if(validform().form()){

        alert(验证通过);

    }

    });

    });

function validform(){

/*关键在此增加了一个return，返回的是一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/

return  $("#form_register").validate({

       debug:true,

    rules:{

        name:{required:true},

        password:{required:true},

        password1:{required:true,equalTo: "#password"},

        emal:{required:true},

        hobby:{required:true},

        age:{required:true,digits:true},

    },

    messages:{

        name:{required:"请输入用户名"},

        password:{required:"请输入密码"},

        password1:{required:"请输入密码",equalTo: "两次密码输入不一致"},

        emal:{required:"请输入电子邮箱"},

        hobby:{required:"请选择爱好"},

        age:{required:"请输入年龄",digits:"必须为整数"},

    },

    errorPlacement:function(error, element){

        element.addClass('palceholder');

        error.appendTo(element.parent());

    }

});

}

当点击button提交按钮时，发现界面也可以进行校验

基本上就这么多，以后用到新的，以后再写。

想的太多，做的太少，中间的落差就是烦恼，要么去做，要么别想 少尉【16】

【jQuery】(6)---jQuery validate插件的更多相关文章

读<jQuery 权威指南>[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例演示插件jquery.validate ...
表单验证神器——jquery.validate插件
jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...
jquery.validate插件在booststarp中的运用
现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...
jQuery Validate 插件
>>>>>>>>>>>>>>>>>>>>>>>>> ...
jquery validate 插件使用小结
项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...
jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
JQuery Validate插件与实现
菜鸟拙见,望请纠正一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...
Jquery表单验证插件validate
写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

随机推荐

Winform开发框架中工作流模块之审批会签操作(2)
前面随笔介绍了请假申请单和报销申请单两个不同的业务表单的流程处理,一个是单表信息,一个包含明细的主从表信息,后者包含了条件流程的处理,在流程审批中,一般还有一种流程处理就是会签的操作,会签处理是几个审 ...
一.windows环境下rabbitMQ的的安装和配置
rabbitMQ是AMQP 0-9-1(高级消息队列协议)的一个实现,使用Erlang语言编写,利用了Erlang的分布式特性.用它来实现分布式消息队列. 1.因为是用Erlang编写的,所以首先要安 ...
MPSOC之4——petalinux提取源码
petalinux使用太不方便,捆绑的太死板,也不通用,还不如直接用编译器来的简单高效. 本文说明从petalinux中提取出源代码的过程,前提是已经petalinux-build完成. 1. ubo ...
写给自己的web总结——关于html的知识总结
相信每个前端工程师初识前端之时,最先接触的都是html吧! html的全称是hyperText markup language, 超文本标记语言,在网页中所有的文字,图片,架构等都是由html来编写的 ...
【十八】php文件下载源码
index.php <!DOCTYPE html> <html> <head> <title></title> <meta chars ...
iOS: FFmpeg编译和使用学习
ffmpeg是一个多平台多媒体处理工具,处理视频和音频的功能非常强大.目前在网上搜到的iOS上使用FFMPEG的资料都比较陈旧,而FFMPEG更新迭代比较快: 且网上的讲解不够详细,对于初次接触FFM ...
Safari不能连接到服务器
系统偏好设置-网络-高级-代理,把"网页代理"和"安全网页代理"两个复选项去掉,最下面"使用被动FTP模式"复选项保留,即可解决!
JavaWeb框架_Struts2_(五)----->Struts2的标签库
1. Struts2的标签库 1.1 Struts2标签库概述 Struts2的标签库可以分为以下3类:用户界面标签.非用户界面标签.AJAX标签; 2.1.1 Struts2标签库的分类和使用 1 ...
724. Find Pivot Index
Given an array of integers nums, write a method that returns the "pivot" index of this arr ...
echarts异步数据加载(在下拉框选择事件中异步更新数据)
接触echarts 大半年了,从不会到熟练也做过不少的图表,隔了一段时间没使用这玩意,好多东西真心容易忘了.在接触echarts这期间也没有总结什么东西,今天我就来总结一下如何在echart中异步加载 ...

【jQuery】(6)---jQuery validate插件