2015-12-08 5 views
1

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

<script> 
    function validateForm() { 

     var x = document.forms["registerForm"]["Email"].value; 
     if (x == null || x == "") { 
      alert("Email number must be filled out."); 
      return false; 
     } 
     else if(!/@./.test(x)){ 
      alert("Email number must be in correct format."); 
      return false; 
     } 


     x = document.forms["registerForm"]["Phone"].value; 
     if (x == null || x == "") { 
      alert("Phone number must be filled out."); 
      return false; 
     }else if(!/[0-9]+()-/.test(x)){ 
      alert("Phone number must be in correct format."); 
      return false; 
     } 
    } 
    </script> 

Для электронной почты я бы хотел проверить только «@» и «.». включены в адрес электронной почты.

Для номера телефона, я хотел бы проверить() - + [0-9], и одно место принимается только для номера телефона, например +95 9023222, + 95-1-09098098, (95) 902321 Как я могу проверить? Будет еще одна проверка на разъёме, поэтому вам не нужно подробно проверять информацию в форме submit. Благодаря

+0

Использование HTML 5 Проверка с использованием шаблона атрибутов как <входной ид = «телефон» заполнителем = "888- 888-8888 «required pattern =» [0-9] {3} - [0-9] {3} - [0-9] {4} "> –

ответ

2

Вы можете сделать что-то вроде этого,

Html часть

<div class="form_box"> 
    <div class="input_box"> 
     <input maxlength="64" type="text" placeholder="Email*" name="email" id="email" /> 
     <div id="email-error" class="error-box"></div> 
    </div> 
    <div class="clear"></div> 
</div> 

<div class="form_box"> 
    <div class="input_box "> 
     <input maxlength="10" type="text" placeholder="Phone*" name="phone" id="phone" /> 
     <div id="phone-error" class="error-box"></div> 
    </div> 
    <div class="clear"></div> 
</div> 

Ваш скрипт

var email = $('#email').val(); 
var phone = $('#phone').val(); 
var email_re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,3}))$/; 
var mobile_re = /^[0-9]{10}$/g; 



if ($.trim(email) == '') { 
    $('#email').val(''); 
    $('#email-error').css('display', 'block'); 
    $('#email-error').html('Please enter your Email'); 
} else if (!email.match(email_re)) { 
    $('#email-error').css('display', 'block'); 
    $('#email-error').html('Please enter valid Email'); 
} 

if ($.trim(phone) == '') { 
    $('#phone').val(''); 
    $('#phone-error').css('display', 'block'); 
    $('#phone-error').html('Please enter your Phone Number'); 
} else if (!phone.match(mobile_re)) { 
    $('#phone-error').css('display', 'block'); 
    $('#phone-error').html('Please enter valid Phone Number'); 
} else { 
    $('#phone-error').css('display', 'none'); 
    $('#phone-error').html(''); 
} 
+0

Спасибо, мне нравится этот формат. – batuman

+0

Рад, что я мог вам помочь :) –

0

HTML 5 есть адрес электронной проверки объекта вы можете проверить, если вы используете HTML 5

<form><input type="email" placeholder="[email protected]"> 
     <input type="submit"> 
    </form> 

также другой вариант вы можете проверить это Example

3

по электронной почте подтверждение из http://www.w3resource.com/javascript/form/email-validation.php

function ValidateEmail(mail) 
{ 
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)) 
    { 
    return (true) 
    } 
    alert("You have entered an invalid email address!") 
    return (false) 
} 

Телефон проверки из http://www.w3resource.com/javascript/form/phone-no-validation.php

function phonenumber(inputtxt) 
{ 
    var phoneno = /^\d{10}$/; 
    if((inputtxt.value.match(phoneno)) 
     { 
     return true; 
     } 
     else 
     { 
     alert("message"); 
     return false; 
     } 
} 
1

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

Один широко используемый один - Parsley. Он очень прост в использовании. Просто включите .js и .css и добавить некоторую информацию в форме, и это элементы, как это (fiddle):

<script src="jquery.js"></script> 
<script src="parsley.min.js"></script> 
<form data-parsley-validate> 
    <input data-parsley-type="email" name="email"/> 
</form>