jquery validate表单校验的使用

jquery validate详细的使用教程见 菜鸟教程.

登录表单校验常用:

 $loginForm.validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            //验证规则
            rules: {
                loginusername:{
                    required: true,
                    pattern: /^13[0-9]{1}[0-9]{8}$|15[012356789]{1}[0-9]{8}$|18[012356789]{1}[0-9]{8}$|147[0-9]{8}$/,
                },
                loginpassword: {
                    required: true
                },
                captcha:{
                	 required: true
                }
            },
            ignore: "",
            //验证提示信息
            messages: {
                loginusername:{
                    required: "请输入正确的手机号！",
                    pattern: "请输入正确的手机号！"
                },
                loginpassword: {
                    required:"请输入密码！"
                },
                 captcha: {
                    required:"请输入验证码！"
                }
            },
            //验证提示效果设置
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                          },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error ');
            },
            success: function (label, element) {
                label.addClass('help-block valid');
                            },
            errorPlacement: function(error, element) {  
			  	error.appendTo($(element).closest('.form-group'));
			},
            submitHandler: function (form) {
                $.ajax({
                    url: "${base}/test.jhtml",
                    type: "GET",
                    dataType: "json",
                    cache: false,
                    async: false,
                    beforeSend: function() {
                        $submit.prop("disabled", true);
                    },
                    success: function(data) {              
                        $.ajax({
                            url: $loginForm.attr("action"),
                            type: "POST",
                            data: {
                                username: $username.val(),
                                enPassword: enPassword,
                                captchaId: captchaId,
                                captcha: $captcha.val()
                            },
                            dataType: "json",
                            cache: false,
                            async: false,
                            success: function(message) {
                                $submit.prop("disabled", false);
                                if (message.type == "success") {
                                    // 关闭登录框
                                    $("#closeLodinModal").click();
                                } else {
                                    // 清空输入的验证码
                                    $captcha.val("");
                                    // 更新图片验证码
                                    $captchaImage.click();
                                    // 显示错误信息
                                    $("#sendMessageFail").html(message.content);
                                    messageTime=5;
                                    // 定时清除错误信息
                                    TimeDeleteMessage();
                                }
                            }
                        });
                    }
                });
            }
        });

jquey validate 使用ajax后台校验..一般用于重复检查等:

	
	// 表单验证
	$inputForm.validate({
		rules: {
			artsbirdIdEn: {
				required: true,
				pattern: /^[0-9a-zA-Z_\u4e00-\u9fa5]+$/,
				remote: {
					url: "check.jhtml?oldArtsbirdIdEn=${product.goods.artsbirdIdEn}",
					cache: false
				}
			}
		},
		messages: {
			artsbirdIdEn: {
				pattern: "含有非法字符！",
				remote: "已存在！"
			}
		},
		submitHandler: function(form) {
						form.submit();
		}
	});
	
});

(错误提示样式,前端搞定.)

转载于:https://my.oschina.net/coffeeCode/blog/1509964