使用 jQuery Validate 进行表单验证
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",
// 使用 元素进行错误提醒
errorElement: "em",
// 使用 元素包装错误提醒元素
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