jquery.validate.js表单验证

1. 引入js文件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!-- 自定义校验方法 -->
<script src="js/jquery.validate.additional-methods.js"></script>

2. 验证js代码

$(function(){
		/*表单验证*/
		$("#form-id").validate({
			rules: {
				/*required：必须字段；minlength：最小长度 */
			   username: {required:true,minlength:2},
			   /* isPhone:自定义手机号码校验规则 */
			   usertel: {required:true,isPhone:true}
			},
			/*错误提示信息*/
			messages: {
					username: {
					    required: "请输入姓名",
					    minlength: "请输入完整姓名"
					   },
				   
				   usertel: {
					    required: "请输入手机号",
					   }
			},
			/*验证ok,提交表单*/
			submitHandler:function(form){
				//此处可调用自定义方法dosomething();
				form.submit();
	        } 
	    });
	});

3. 自定义校验方法

// 手机号验证   
jQuery.validator.addMethod("isPhone", function(value, element) {   
    var tel = /^1[0-9]{10}$/;
    return this.optional(element) || (tel.test(value));
}, "请输入有效的手机号码");

4. 更改错误信息样式

<!-- css -->
.error{color: red;}

5. 效果