jquery.validate.js使用

1、導入するjs

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>



<script type="text/javascript" src="js/jquery.validate.min.js"></script> 

<!--jquery.validate       -->

<script type="text/javascript" src="js/jQuery.validate.message_cn.js"></script>

<!--          ，  js           ：      -->

<script type="text/javascript" src="js/additional-methods.js"></script>

2、非同期検証 //注意data転送時にuserName:$("#userName").val()バックグラウンドを使用すると値が取得されません!!!

jQuery("#form1").validate({

        rules: {

            "user.userName": {

                required:true,

                remote: {

                    type:"post",

                    url:"<%=path%>/main/main!main.action",

                    data:{

                        userName:function(){return $("#userName").val()} 

                                                                    },

                     dataType: "html",

                        dataFilter: function(data, type) {

                            if (data == "true")

                                return true;

                            else

                                return false;

                        }



                }

            }

            

            

        },

        messages: {

            "user.userName": {

                required:"       ",

                remote:"      "

            }

        success: function(label) {

            label

                .text('Ok!').addClass('valid')

                .closest('.control-group').addClass('success');

        }

    });

3、自分の新しい携帯番号検証規則additional-methods.jsの追加方法を呼び出す

/********       **********/

$.validator.addMethod("mobile",function(value,element){

    if((validate_mobile(value))){

        return true;

    }else{

        return false;

    }

});



function validate_mobile(field) {

    with (field) {

        var patrn = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;

        if (!patrn.exec(field)) {

            return false;

        } else {

            return true;

        }

    }

}

ページコール

jQuery("#form1").validate({

        rules: {

            "user.mobile":{

                required: true,

                mobile: true,

            }

            

        },

        messages: {

            "user.mobile":{

                required: "      ",

                mobile: "         ",

            }            

        },

        highlight: function(label) {

            jQuery(label).closest('.control-group').addClass('error');

        },

        success: function(label) {

            label

                .text('Ok!').addClass('valid')

                .closest('.control-group').addClass('success');

        }

    });