jQuery.Validate表单验证插件

教程地址

地址在这: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>