jquery.validate1.9.0 프런트 엔드 검증_jquery 사용 소개

1. jquery.form 플러그인을 사용하여 양식을 제출합니다.

현상: 양식 제출 시 프런트엔드가 확인을 통과하지 못하더라도 평소대로 양식이 제출됩니다.

해결책:

코드 복사 코드는 다음과 같습니다.

$('#myForm').submit(function(){
if (!$(this).valid()) return false;//이 문장 추가 OK
$('.error' ).html('');
$("#go").prop("disabled",true);
$(this).ajaxSubmit({
유형:"POST",
/ /beforeSubmit: showRequest,
dataType:'json',
성공: showResponse
});
return false;
});

관련 지침:

맞춤형 제출 방법(ajax 제출)
Ajax 방법을 사용하여 제출하는 경우 검증 프레임워크와 결합하여 다음 두 가지 방법을 사용하세요.
1) submitHandler 속성을 사용하여 ajax 제출 핸들러를 구성합니다. 양식이 완전히 검증되면 검증이 통과된 후 구성된 코드가 다시 호출됩니다. 여기서는 검증이 통과된 후 ajax 제출이 호출됩니다.
2) 유효한 메소드를 사용하여 양식의 submit 이벤트를 수신한 후 $('#form').valid()가 true를 반환하면 제출합니다.

양식의 submit 이벤트를 듣고 ajax를 통해 양식을 제출합니다. 예제의 전체 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function(){

    $('#myForm').submit(function(){
        if (!$(this).valid()) return false;
        $('.error').html('' );
        $("#go").prop("disabled",true);
        $(this).ajaxSubmit({
            유형:"POST",
            //beforeSubmit: showRequest ,
            dataType:'json',
            성공: showResponse
        });
        return false;
    });

    var 유효성 검사기 = $("#myForm").validate({
        규칙: {
            사용자 이름: "필수",
            이메일: {
               필수:
                이메일: true
            }
        },
        메시지: {
            사용자 이름: "请输入姓name",
            이메일:      필수: "请输入Email地址",
                이메일: "请输入正确的email地址"
            }
        }
    });

});

function showResponse(jsonData,statusText)

{
    if(statusText=='success')
    {
        $("#go").prop("disabled",false);
        if (jsonData.status == 1)
        {
            $("#return").html(jsonData.message);
        }
        else
        {
            $ .each(jsonData.errors, function(k,v){
                //$('#output').find('ul').append('

' v '

' ); $ ( '. e_'k) .html (v);
});
} 现象一：

目的：让错误信息在验证码后면

现象이：

上图中的红color提示内容，我想移到 (* 必填) 的后면。

상위 인터페이스에서 jquery.validate 자체적으로 실행하는 방법은?码

代码如下:errorPlacement: function(error, element)

{

    error.appendTo(element.parent());
}