zoukankan      html  css  js  c++  java
  • 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=" 90%;"
                                value="<bean:write name="a_usr_s03Form" property="idUser"/>" />
                            </td>
                            <td align="left" width="22%" nowrap="nowrap">&nbsp;</td> //显示提示信息

  • 相关阅读:
    原型链的树形结构
    粗略讲一讲js的代码执行机制
    30天前端打卡整理记录
    简单模拟Vue的数据代理功能
    JavaScript语言精粹读后记录
    JavaScript巧用对象的引用解决三级联动
    es6新了解
    记录小程序开发的n个坑
    比拼人品-拼手气红包的JavaScript实现方式.
    一诺千金:微信小程序的wx.request 与Promise的结合使用
  • 原文地址:https://www.cnblogs.com/chengfang/p/jquery_validate.html
Copyright © 2011-2022 走看看