一、引入文件

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>

<script src="js/jquery.validate.js" type="text/javascript"></script>

二、声明HTML片段

<form action="" id="jvForm">

	  用 户 名:<input type="text" name="username"/></br>

	  密    码:<input type="password" name="password" id="password"/></br>

	  确认密码:<input type="password" name="confirm_password"/></br>

	  出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option>

	<option value="1">上海</option><option value="1">深圳</option></select></br>

	  手    机:<input type="text" name="mobile" /></br>

	  邮    箱:<input type="text" name="email" /></br>

	  <input type="submit" value="提交" />

</form>

三、错误提示样式

<style type="text/css">

	label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;}

</style>

四、验证代码

<script type = "text/javascript">

$(function() {

    $("#jvForm").validate({

        rules: {

            username: { //用户名必填 至少3位

                required: true,

                minlength: 3

            },

            password: { //密码必填 至少6位

                required: true,

                minlength: 6

            },

            confirm_password: { //密码确认

                required: true,

                equalTo: "#password"

            },

            address: { //出生地必填

                required: true

            },

            mobile: { //手机必填  验证格式

                required: true,

                mobile: true

            },

            email: { //email必填 验证格式

                required: true,

                email: true

            },

        },

        messages: {

            username: {

                required: "用户名不能为空!",

                minlength: "用户名至少三位!"

            },

            password: {

                required: "密码不能为空!",

                minlength: "密码至少六位!"

            },

            confirm_password: {

                required: "密码确认不能为空!",

                equalTo: "两次输入密码不一致 !"

            },

            address: {

                required: "请选择出生地!",

            },

            mobile: {

                required: "手机不能为空!",

                mobile: "手机格式不对",

            },

            email: {

                required: "邮箱不能为空!",

                email: "邮箱格式不对",

            },

        }

    });

})

</script>

由于jquery.validate.js中没有mobile验证。所以须要自己添加一个

首先找到messages 在里面加入mobile 例如以下：

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.",

	mobile: "请填写正确的手机号码.",

	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}.")

}

然后在methods中加入 mobile的正则校验

mobile: function( value, element ) {

	return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value);

}

执行效果