前端基础(5)：Validate

（一）Validate

（1）基础用法

• Validate定义
  
  • Validate是基于jQuery的轻量级插件
  • 用于表单的校验
• 使用方式
  
  • 首先需要导入.js包
  • <script src="../js/jquery.validate.js"></script>
  • 使用方法：$(“选择器”).validate({code})
  • 内部使用 字段名（标签的name属性）：”属性值”的方式
    
    • rules：表示元素输入应该遵循的规则
    • messages：表示输入错误时的提示信息

        <script type="text/javascript">
            $(function(){
                $("#formId").validate({
                    rules:{
                        username:"required",
                        password:{
                            required:true,
                            digits:true
                        },
                        repassword:{
                            equalTo:"[name='password']"
                        }
                    },
                    messages:{
                        username:"用户名不能为空"  ,
                        password:{
                            required:"密码不能为空",
                            digits:"密码只能是数字"
                        }
                    }
                });
            });
        </script>

（2）基本表单校验

• 容易忽视的：rules中的校验元素之间需要使用逗号分割，不然会报错或者失效

    <script>
        $(function(){
            $("#formid").validate({
                rules:{
                    username:{
                        required:true,
                        rangelength:[5,10]
                    },
                    password:{
                        required:true,
                        rangelength:[4,6]
                    },
                    repassword:{
                        equalTo:"#password"
                    }
                },

                messages:{
                    username:{
                        required:"用户名不能为空",
                        rangelength:"长度应该为{0}~{1}"
                    },
                    password:{
                        required:"密码不能为空",
                        rangelength:"长度应该为{0}~{1}"
                    }
                }
            });
        });
    </script>