jQuery Validation让验证变得如此容易(三)详解编程语言

以下代码进行对jQuery Validation的简单演示包括必填项、字符长度，格式验证

一、引入文件

<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); 
}