解决jQuery与Prototype等JavaScript框架冲突的办法!(已在项目中实践)

原创
2012/03/26 14:46
阅读数 160

jQuery v1.4.2  +  jquery.validate-1.7  +  Prototype

以上几个对应的js文件由SiteMesh的default.jsp引入:

        <%-- 引入jQuery框架及其插件相关文件,注意将jQuery相关文件放到Prototype等其它JavaScript框架的前面引入,防止冲突 --%>
        <script type="text/javascript" src="<c:url value='/scripts/jquery/jquery-1.4.2.min.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/jquery/validate/jquery.validate-1.7.min.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/prototype.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/scriptaculous.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/global.js'/>"></script>

在自己写的基于jQuery框架的validate插件的JavaScript验证文件中,以jQuery代替$符号,即可防止冲突啦!!!

v-login.js代码如下:

jQuery(document).ready(function(){
        jQuery("#loginForm").validate({
            // 设置验证规则,这里要用表单域的name属性值,不是用id属性值
            rules: {
                'j_username': {
                    required: true
                },
                'j_password': {
                    required: true
                }
            },

            // 验证提示信息(失败时)
            messages:{
                'j_username': {
                    required: "请输入用户名!"
                },
                'j_password': {
                    required: "请输入密码!"
                }
            },

            // 设置错误提示样式
            errorPlacement: function(error, element) {
                error.appendTo(element.parent());//
            },

            // 验证成功时执行
            success:
                    "valid"
         });
        debug: false // 参数为true,那么表单不会提交,只进行检查,方便开发时调试
    });

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部