Question

我使用javascript做了一个简单的验证脚本功能，它的工作原理，但是当我尝试用jquery做它不起作用时，它不会调用它，我已经找了一些教程，但它似乎我无法找到一个明确答案。

以下是代码：

 $(document).ready(function () { 

    function validateForm() {
        var cel = document.forms["myForm"]["cel"].value;
        var celconf = document.forms["myForm"]["celconf"].value;
        var ocr=document.forms["myForm"]["ocr"].value;
        var ocrconf = document.forms["myForm"]["ocrconf"].value;



        if (cel==""||celconf==""||ocr==""||ocrconf=="") {
            alert("Todos los campos deben ser llenados");

        }

        else  if (cel.length != 10||celconf.length!=10) {

            alert("El numero celular debe de ser de 10 digitos");}

        else if (cel != celconf) {

            alert("Los numeros celulares ingresados no Coinciden");

        }


       else if (ocr.length<10||ocrconf.length<10) {

            alert("El OCR ingresado no tiene la longitud necesaria, ésta debe de ser de 13 o 10 digitos");

       }

       else if (ocr.length > 13 || ocrconf.length > 13) {

           alert("El OCR ingresado no tiene la longitud necesaria, ésta debe de ser de 13 o 10 digitos");
       }

       else if (ocr.length == 11 || ocr.length == 12 || ocrconf == 11 || ocrconf == 12) {

           alert("El OCR ingresado no tiene la longitud necesaria, ésta debe de ser de 13 o 10 digitos");

       }



       else if (ocr != ocrconf) {

           alert("Los OCR ingresados no Coinciden");

       }

       else {
           $("#myModal").modal("show");
           $.ajax({
               type: "POST",
               url: "http://localhost:38815/altasms/test",
               data: {celjson:cel, ocrjson:ocr},
               success: function(obj) {


                   obj.Celular;
                   obj.OCR;

               }

           });
               return false;


       }



        return false;

    }

    });

这是我称之为的地方：

<form style="padding:7px" name="myForm" method="post" onsubmit="return validateForm()" target="myFrame">
<b>Celular</b><br /><input  onblur="validateCel()" class="form-control" type="number" name="cel"><br />
<br /><b>Confirma tu Celular</b><br /> <input class="form-control" type="number" name="celconf"><br />
<br /><b>OCR</b><br /> <input class="form-control" type="number" name="ocr"><br />
<br /><b>Confirma tu OCR</b><br /> <input class="form-control" type="number" name="ocrconf"><br />
<br /><input class="btn btn-success" type="submit" value="Enviar">
</form>

正如我所说，它适用于js，但我试图让它与jquery一起工作。

Answer 1

validateForm在此事件处理程序之外不存在：

$(document).ready(function () {
    function validateForm() {
        // implementation
    }
});

因此，该事件处理程序之外的任何内容都无法看到它。为了让其他代码使用它，在处理程序之外定义它：

function validateForm() {
    // implementation
}

Answer 2

您可以扩展jQuery以获得jQuery解决方案：

$.extend({
    myform: new function () { //create a new object inside jQuery
        var _self = this;

        _self.initialize = function (form) {
            $('.btn-success', form).click(function(){
                 if (isValid(form)){
                     submitForm(form);
                 }
                 else alert('Invalid Form');
            });

        };    

        var isValid = function(form){
            //your validation code here
            //return false if not valid, true otherwise
            return true;
        };   

        var submitForm = function(form){         
           var cel = $('input[name=cel]', form).val();
           var ocr = $('input[name=ocr]', form).val();
           $("#myModal").modal("show");
           $.ajax({
               type: "POST",
               url: "http://localhost:38815/altasms/test",
               data: {celjson:cel, ocrjson:ocr},
               success: function(obj) {
                   console.log(obj.Celular);
                   console.log(obj.OCR);
               }
           }); 
    }
});

$(function () {  //initialize on document ready
    $.myform.initialize($('form[name=myForm]'));
});

如何使用Jquery声明一个函数

2 个答案: