проверка формы javascript - PullRequest
Новая
       7

проверка формы javascript

0 голосов
/ 02 августа 2011

Я делаю сайт с множеством форм.Я пытаюсь сделать свои коды эффективными и гибкими, используя проверку формы Javascript.Я хочу отображать сообщение об ошибке рядом с каждым полем в формах, если они введены неправильно

Проблемы: 1. функция «chkfrmRegister» не работает 2. elem.value работает, когда закомментировано «chkfrmRegister».3. не может пролистывать поля, если поле введено неправильно.4. при отправке сообщения об ошибках не появляются рядом с полями, которые были введены неправильно (возможно, это вызвано тем, что "chkfrmRegister" не работает)

Вот тестовая версия моих кодов:

HTML 

<html>
<head>
<script src="validate.js">
</script>
</head>
<body>
  <form id="frmRegister" method="post" action="">
    <ul>
      <li>
        <label id="lFname" for="lFname">First Name*</label>
        <input id="iFname" name="iFname" class="text" size="38" maxlength="30" onblur="chkAlphabet(iFname, 'Please enter letters only')" />
      </li>
      <li><input id="iFnameMsg" class="errorStr" /></li>
      <li>
        <label id="lLname" for="lLname">Last Name*</label>
        <input id="iLname" name="iLname" class="text" size="38" maxlength="20" onblur="chkAlphabet(iLname, 'Please enter alphabets only')" />
      </li>
      <li><input id="iLnameMsg" class="errorStr" /></li>
      <li>
        <label id="lEmail" for="lEmail">Email*</label>
        <input id="iEmail" name="iEmail" class="text" size="38" maxlength="30" onblur="chkEmail(iEmail, 'Please enter a valid e-mail')" />
      </li>
      <li><input id="iEmailMsg" class="errorStr" /></li>
      <li>
        <label id="lContactNo" for="lContactNo">Contact No.*</label>
        <input id="iContactNo" name="iContactNo" class="text" size="38" maxlength="16" onblur="chkNumeric(iContactNo, 'Please enter numbers only')" />
      </li>
      <li><input id="iContactNoMsg" class="errorStr" /></li>
      <li><br />
      </li>
      <li>
        <!--<input type='submit' onclick="chkfrmRegister()" value='Register' />-->
        <input type='submit' value='Register' />
      </li>
    </ul>
  </form>
</body>
</html>

JAVASCRIPT 

function chkfrmRegister(){
    var firstname = $("#iFname");
    var lastname = $("#iLname");
    var email = $("#iEmail");
    var contactno = $("#iContactNo");

    // Check each input in the order that it appears in the form!
    if(chkAlphabet(firstname, "Please enter letters only")){
        if(chkAlphabet(lastname, "Please enter letters only")){
            if(chkEmail(email, "Please enter a valid email address")){
                if(chkNumeric(contactno, "Please enter numbers only. No space or special characters")){
                    return true;
                }
            }
        }
    }

    return false;   
}

function chkAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function chkNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function chkEmail(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

Что мне здесь не хватает?Может кто-нибудь, пожалуйста, посоветуйте?Спасибо!

Ответы [ 4 ]

3 голосов
/ 02 августа 2011

Честно говоря, вы пытаетесь заново изобрести колесо.Существует множество плагинов для проверки jQuery, которые реализуют всю необходимую функциональность.Кроме того, они предоставляют больше удобных для пользователя обновлений пользовательского интерфейса, чем вы пытаетесь достичь - дают пользователю возможность заполнить правильные значения, прежде чем показывать ошибки.Один из этих плагинов проверки - плагин проверки jQuery .Это тот, который ASP.NET MVC использует по умолчанию, и он определенно хорошо разработан и задокументирован.

И если вы все еще хотите продолжить разработку своего кода, проблема в том, что вы используете 

elem.value

в ваших методах проверки.elem является объектом jQuery и не содержит определения для value.Вместо этого во всех ваших функциях проверки вы должны написать 

elem.val()

, и ваш код начнет работать

1 голос
/ 02 августа 2011

Вам лучше попробовать validationEngine, чтобы решить вашу проблему ~~~ вроде validationEngine

1 голос
/ 02 августа 2011

Если вы начинаете с этого, то вам стоит взглянуть на jQuery , у него есть плагин проверки формы, который очень хорош.

вот статья о проверке формы jQuery

0 голосов
/ 02 августа 2011

Существуют отличные методы проверки для jquery;Я очень рекомендую один из них.

Если вы все еще предпочитаете создавать свои собственные, вы можете применить некоторые из этих методов.

  • $ ('form'). Bind ('submit', fncValidateSubmit) // подключаем к функции отправки
  • fncValidateSubmit
    • убедитесь, что вы проверили атрибут в форме, чтобы увидеть, должна ли происходить проверка, таким образом его можно отключить
    • $ (this) .filter ('input ... other elements'). Each (fncValidate);// проверяем все редактируемые элементы
  • fncValidate ()
    • $ (this) .attr ('validationType');// включить тип val в качестве атрибута при рендеринге элемента
    • // проверить элемент на основе типа и динамически добавить элемент метки рядом с элементом, который не прошел проверку
      • return falseкак только произойдет сбой

Тогда вам просто нужно создать правила проверки для каждого типа;Вы также должны включить customValidation, чтобы программист мог добавить свою собственную проверку регулярных выражений.

Если вам нужны дополнительные функции, вы можете медленно добавлять их в ... но в этот момент вы также можете использовать один изпакеты.

...