jquery验证框架

需要导入jquery.validate.js包

 

js：

$("#a_usr_s03Form").validate({
        errorClass : "invalid",
        success : "valid",
        errorPlacement : function(error, element) {
            error.appendTo(element.parent("td").next("td"));
        },
        rules : {
            idUser : {
                required : true,
                maxlength : 12
            },
            userName : {
                required : true,
                maxlength : 30
            },
            password : {
                required : true,
                maxlength : 15
            },
            rekeyPassword : {
                required : true,
                equalTo : "#password"
            }
        },
        messages : {
            idUser : {
                required : $("#idUserRequiredMsg").val(),
                maxlength : $("#idUserMaxLengthMsg").val()
            },
            userName : {
                required : $("#userNameRequiredMsg").val(),
                maxlength : $("#userNameMaxLengthMsg").val()
            },
            password : {
                required : $("#passwordRequiredMsg").val(),
                maxlength : $("#passwordMaxLengthMsg").val()
            },
            rekeyPassword : {
                required : $("#re-keyRequiredMsg").val(),
                equalTo : $("#re-keyIncorrectMsg").val()
            }
        }
    });

 

css样式：

label.invalid {     background: url("http://www.cnblogs.com/image/error.png") no-repeat 0px 0px;     padding-left: 16px;     color: red; }

label.valid {     background: url("http://www.cnblogs.com/image/correct.png") no-repeat 0px 0px;     height: 15px; }

 

 

jsp界面：

<td class="tdRight" width="17%"><span class="red_star"><bean:message key="screen.common.label_star" /> </span>
                            <bean:message key="screen.a_usr_s02.userid" />
                        </td>
                        <td align="left" width="25%"><input type="text" id="idUser" class="disabled" name="idUser" maxlength="13" style="width: 90%;"
                            value="<bean:write name="a_usr_s03Form" property="idUser"/>" />
                        </td>
                        <td align="left" width="22%" nowrap="nowrap">&nbsp;</td> //显示提示信息