Jquery Validation表单验证插件的使用

喜欢ヅ旅行 2022-06-04 02:07 283阅读 0赞

一：首先是下载并引用：

二：html部分：

备注：此处需要注意的是：validation是根据表单元素的name属性绑定的，所以一定要把name属性写上

三：js控制部分：

$().ready(function() \{    
        $(".biaodan").validate(\{    
                rules: \{    
           firstname: "required",    
           email: \{    
            required: true,    
            email: true    
           \},    
           password: \{    
            required: true,    
            minlength: 5    
           \},    
           confirm\_password: \{    
            required: true,    
            minlength: 5,    
            equalTo: "\#password"    
           \}    
        \},    
                messages: \{    
           firstname: "请输入姓名",    
           email: \{    
            required: "请输入Email地址",    
            email: "请输入正确的email地址"    
           \},    
           password: \{    
            required: "请输入密码",    
            minlength: jQuery.format("密码不能小于\{0\}个字符")    
           \},    
           confirm\_password: \{    
            required: "请输入确认密码",    
            minlength: "确认密码不能小于5个字符",    
            equalTo: "两次输入密码不一致不一致"    
           \}    
        \}    
            \});    
        \});

备注：rules部分为参数配置部分；message部分为提示信息部分，两部分都是通过表单元素的name属性绑定的

四：避免重复提交的实现：原理是表单验证通过后给提交按钮disabled然后提交

$(document).ready(function() \{   
        $(".biaodan").validate(\{   
        submitHandler: function(form) \{   
        $(form).find(":submit").attr("disabled", true).attr("value",   
        "提交成功");   
        form.submit();   
        \}   
        \})   
        \});

五：更多扩展功能可到菜鸟教程查看：

http://www.runoob.com/jquery/jquery-plugin-validate.html