<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form id="example_form" method="get" action=""> <fieldset> <legend>填写注册信息</legend> <p> <label for="user_name">登录名</label> <input id="user_name" name="name" /> </p> <p> <label for="user_age">年龄</label> <input class="math_class" id="user_age" name="age" /> </p> <p> <label for="user_birthday">生日</label> <input id="user_birthday" name="birthday" /> </p> <p> <label for="user_card_id">信用卡号</label> <input id="user_card_id" name="card" /> </p> <p> <label for="user_salary">月薪</label> <input id="user_salary" name="salary" /> </p> <p> <label for="user_prove">流水证明</label> <input id="user_prove" type="file" name="prove" /> </p> <p> <label for="user_phone">家庭电话</label> <input class="phone_group" id="user_phone" name="phone" /> </p> <p> <label for="user_mobile">个人电话</label> <input class="phone_group" id="user_mobile" name="mobile" /> </p> <p> <label for="user_image">个人头像</label> <input id="user_image" type="file" name="image" /> </p> <p> <label for="user_home">个人首页</label> <input id="user_home" type="url" name="home" /> </p> <p> <label for="user_password">输入密码</label> <input id="user_password" type="password" name="password" /> </p> <p> <label for="user_repassword">重复密码</label> <input id="user_repassword" type="password" name="repassword" /> </p> <p> <label for="send_to_me">邮件订阅</label> <input id="send_to_me" type="checkbox" name="sendMe" /> </p> <p> <label for="user_email">邮件地址</label> <input id="user_email" type="email" name="email" /> </p> <p> <label for="registration_agree">已阅读并同意注册协议</label> <input id="registration_agree" type="checkbox" name="regAgree" /> </p> <p> <input class="submit" type="submit" value="Submit" /> </p> </fieldset> </form> <div id="error_messages"> <div id="error_tips"></div> <ul></ul> </div> <div id="error_container"></div> <script src="jquery-1.8.3.js"></script> <script src="jquery.validate.min.js"></script> <script src="additional-methods.min.js"></script> <script src="messages_zh.min.min.js"></script> <script> jQuery.validator.addMethod("math", function(value, element, params) { var sign = params[0]; var result; switch (sign) { case "*": result = params[1] * params[2]; break; case "/": result = params[1] / params[2]; break; case "-": result = params[1] - params[2]; break; default: result = params[1] + params[2]; } return this.optional(element) || value == result; }, jQuery.validator.format("Please enter the correct value for {0} + {1} + {2}")); jQuery.validator.addClassRules("math_class", { required: true, math: ['*', 5, 6] }); jQuery.validator.setDefaults({ // 仅做校验，不提交表单 debug: true, // 提交表单时做校验 onsubmit: true, // 焦点自动定位到第一个无效元素 focusInvalid: true, // 元素获取焦点时清除错误信息 focusCleanup: true, //忽略 class="ignore" 的项不做校验 ignore: ".ignore", // 忽略title属性的错误提示信息 ignoreTitle: true, // 为错误信息提醒元素的 class 属性增加 invalid errorClass: "invalid", // 为通过校验的元素的 class 属性增加 valid validClass: "valid", // 使用 <em> 元素进行错误提醒 errorElement: "em", // 使用 <li> 元素包装错误提醒元素 wrapper: "li", // 将错误提醒元素统一添加到指定元素 //errorLabelContainer: "#error_messages ul", // 自定义错误容器 errorContainer: "#error_messages, #error_container", // 自定义错误提示如何展示 showErrors: function(errorMap, errorList) { $("#error_tips").html("Your form contains " + this.numberOfInvalids() + " errors, see details below."); this.defaultShowErrors(); }, // 自定义错误提示位置 errorPlacement: function(error, element) { error.insertAfter(element); }, // 单个元素校验通过后处理 success: function(label, element) { console.log(label); console.log(element); label.addClass("valid").text("Ok!") }, highlight: function(element, errorClass, validClass) { $(element).addClass(errorClass).removeClass(validClass); $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); }, unhighlight: function(element, errorClass, validClass) { $(element).removeClass(errorClass).addClass(validClass); $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); }, //校验通过后的回调，可用来提交表单 submitHandler: function(form, event) { console.log($(form).attr("id")); //$(form).ajaxSubmit(); //form.submit(); }, //校验未通过后的回调 invalidHandler: function(event, validator) { // 'this' refers to the form var errors = validator.numberOfInvalids(); if (errors) { var message = errors == 1 ? 'You missed 1 field. It has been highlighted': 'You missed ' + errors + ' fields. They have been highlighted'; console.log(message); } } }); $("#example_form").validate({ rules: { name: { required: true, minlength: 2, maxlength: 24 }, age: { required: true, rangelength: [1, 3], min: 10 }, birthday: { required: true, //date:true, dateISO: true }, card: { required: { depends: function(element) { return $("#user_age").val() >= 18; } }, creditcard: true }, salary: { required: true, step: { param: 100, depends: function(element) { return $("#user_age").val() >= 28; } } }, prove: { required: function(element) { return $("#user_age").val() >= 18; }, extension: "xls|csv|doc" }, phone: { require_from_group: [1, ".phone_group"], phoneUS: true }, mobile: { require_from_group: [1, ".phone_group"] }, image: { required: true, accept: "image/*" //accept:"audio/*,image/x-eps,application/pdf" }, home: { required: true, url: true, // 校验之前对内容进行处理 normalizer: function(element) { var url = $.trim($(element).val()); // Check if it doesn't start with http:// or https:// or ftp:// if (url && url.substr(0, 7) !== "http://" && url.substr(0, 8) !== "https://" && url.substr(0, 6) !== "ftp://") { // then prefix with http:// url = "http://" + url; } // Return the new url return url; }, // 失去焦点时进行校验 onfocusout: function(element, event) { console.log(element); }, onkeyup: function(element, event) { console.log(element); }, onclick: function(element, event) { console.log(element); } }, password: { required: true, minlength: 6 }, repassword: { required: true, equalTo: "#user_password" }, email: { required: "#send_to_me:checked", email: true, remote: { url: "http://localhost:8080/check/register", type: "post", dataType: "json", data: { email: $("#user_email").val() } } }, regAgree: { required: true } }, //自定义错误提示信息 messages: { name: { required: "请输入用户名", minlength: jQuery.validator.format("用户名至少需填写{0}个字符"), maxlength: jQuery.validator.format("用户名最多填写{0}个字符") } }, }); </script> </body> </html>
源码地址：https://github.com/CodingPandaLLL/file/tree/master/jsValidate
文章转自：https://blog.csdn.net/pengjunlee/article/details/80685500