jquery插件

jquery的插件：

　　　　　　网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的小框架就可以，叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而这些复杂功能的背后实现我们可以不必懂。

表单校验插件：

　　　　导入插件的步骤：

　　　　　　(1) 将jquery的原始文件和插件文件jquery.validate.js导入到工程中

　　　　　　(2) 编写js代码对表单进行验证

表单验证的格式：

　　　　$("form表单的选择器").validate(json数据格式); //键值对键：值（{}）

　　　　json数据格式：

　　　　{

　　　　 rules:{

　　　　表单项name值:校验规则，

　　　　表单项name值:校验规则... ...

　　　　 messages:{

　　　　表单项name值:错误提示信息，

　　　　表单项name值:错误提示信息... ...

　　　　 }

其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式

　　　　常用校验规则如下 :

　　　　注意：当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置

　　　　　　自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此

　　　　　　信息自动显示出来，jquery验证插件会自动帮助我们控制它的显示与隐藏

　　　　　　如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了

　　　　　　如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

　　　　　　　　自定义校验规则步骤如下：

　　　　　　　　　　(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}

　　　　　　　　　　(2) 在rules中通过校验规则名称使用校验规则

　　　　　　　　　　(3) 在messages中定义该规则对应的错误提示信息

　　　　　　　　其中： value是校验组件的value值

　　　　　　　　element是校验组件的节点对象

　　　　　　　　params是校验规则的参数

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css" />

<style>

</body>
<script type="text/javascript">
$("#myform").validate({
    rules:{
    "username":"required",
     "password":{
         "required":true,
         "rangelength":[6,9]
     },
     "confirmpwd":{"required":true,"equalTo":"#password"},
     "email":{
         "required":true,
         "email":true
     },
     "sex":"required"
  },
  messages:{
        "username":"用户名不能为空！",
        "password":{
            "required":"秘密不能为空！",
            "rangelength":"请输入6-9为密码！"
        },
             "confirmpwd":{"required":"确认密码不能为空!",
                 "equalTo":"两次密码不一致"},
                 "email":{
                     "required":"邮箱不能为空1",
                     "email":"邮箱格式不正确！"
                 }
  },
                  "sex":"性别不能为空！"
});
</script>
</html>