前端基础(5):Validate

  • Post author:
  • Post category:其他


(一)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>



版权声明:本文为H_Targaryen原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。