教程地址
地址在这:http://www.runoob.com/jquery/jquery-plugin-validate.html,比这篇说的要详细,此篇只是自己初学的笔记,有更多的方法看教程比较好.
插件地址
自己打包了使用此功能必须的插件:点我下载
默认校验规则
| 规则 | 描述 |
|---|---|
| required:true | 必须输入的字段 |
| remote:'check.php' | 使用ajax方式调用check.php验证输入值 |
| email:true | 必须输入正确格式的邮箱地址 |
| url:true | 必须输入正确格式的网址 |
| date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-02-16,1998/09/12,只验证格式,不验证有效性 |
| number:true | 必须输入合法的数字(负数,小数) |
| digits:true | 必须输入正数 |
| creditcard: | 必须输入合法的信用卡卡号 |
| equalTo:"#field" | 输入值必须和 #field 相同 |
| accept: | 输入拥有合法后缀名的字符串(上传文件的后缀) |
| maxlength:5 | 输入长度最多为5的字符串(汉字算1个字符串) |
| minlength:5 | 输入长度最少为5的字符串 |
| rangelength:[5:10] | 输入长度必须为5-10个字符串 |
| range[5:10] | 输入值必须为5-10之间 |
| max:5 | 输入值最大不能大于5 |
| min:5 | 输入值最小不能小于5 |
默认提示
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}
jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
/*
* Translated default messages for the jQuery validation plugin.
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
*/
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入有效的数字",
digits: "只能输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
}));
你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
使用方式
注意事项
- 标签中必须有
name的属性,是靠name取值的 - 加载时,必须jQuery在最上面,会报错
- 字体的颜色设置css时,需要
.error命名 - 需要jQuery1.11版本的
- 重置表单状态,需要使用
button按钮 - 清空表单使用
<input type='reset' />实现
例子
直接就写到一个例子当中了,注意看注释吧:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>
/* 错误信息CSS样式,名称为.error*/
.error{
color: red;
}
</style>
</head>
<body>
<form action="/test2/" class="testform" id="testform">
<p>
<label for="firstname">姓氏</label>
<input type="text" name="firstname" id="firstname">
</p>
<p>
<label for="lastname">名字</label>
<input type="text" name="lastname" id="lastname">
</p>
<p>
<label for="password">密码</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="confirm_password">确认密码</label>
<input type="password" name="confirm_password" >
</p>
{# <p><input type="password" name="xxx"></p>#}
<p><label for="email">邮箱:</label><input type="text" name="email"></p>
<p><label for="comment">备注:</label><textarea name="comment" id="comment" cols="30" rows="8"></textarea></p>
<p><input type="submit" value="提交"></p>
{# /* 清空表单可以直接使用reset的button */#}
<p><input type="reset"></p>
{# 重置表单状态#}
<p><input type="button" value="清空表单" id="reset"></p>
</form>
{# ## jqure文件要首先导入#}
<script src="/static/jquery.js"></script>
<script src='/static/jquery.validate.js'></script>
<script src='/static/messages_zh.js'></script>
<script>
$().ready(function () {
var validator = $("#testform").validate({
rules:{
firstname:{required:true,minlength:5},
lastname:{required:true,minlength:5},
password:{required:true,minlength:6},
confirm_password:{required:true,minlength:6,equalTo:"#password"},
email:{required:true,email:true}
},
messages:{
firstname:{required:'必须输入姓氏',minlength:'不能小于5个字符'},
lastname:{required:'必须输入名字',minlength:'不能小于5个字符'},
password:{required:'请输入密码',minlength:'密码至少6位'},
confirm_password:{required:'请确认密码',minlength:'密码至少6位',equalTo:'两次输入的密码不匹配'},
email:'请输入一个正确的邮箱地址'
},
errorPlacement: function(error, element) {
// 更改错误提示位置在输入框下面
// var p = $("<p />").append(error);
// p.appendTo(element.parent());
// 位置默认在输入框右侧
error.appendTo(element.parent());
},
submitHandler:function(form) {
var firstname = $('#firstname').val();
$.ajax({
url:'/test2/',
type:'POST',
dataType:'json',
data:{'firstname':firstname},
success:function (data) {
if(data.status){
alert(data.message)
}else{
alert('failure')
}
}
})
}
});
// 需要将input的type设置为button,重置表单为提交前的状态
$('#reset').click(function () {
validator.resetForm();
});
});
</script>
</body>
</html>