Javaフォームの検証

フォームから詳細を出力する警告ボックスを作成しました。これで、フォームにというフォームの警告ボックスが正しく入力されるように、Java検証パートをどのように開始するのかと思います。詳細が表示されますが間違っている場合は、ユーザーに無効なボックスを記入するよう指示します。他Javaフォームの検証

HTML

<form id="foo" onsubmit="formAlert(); return false;" method="POST"> 
    <p><label for="first_name">First Name<label><input type="text" id="first_name" value="" /></p> 
    <p><label for="last_name">Last Name<label><input type="text" id="last_name" value="" /></p> 
    <p><label for="Phone_num">Phone Number<label><input type="number" id="phone_num" value="" /></p> 


    <p><input type="submit" value="click me" onclick=""/></p> 
</form>

Javaスクリプト

function formAlert() { 
alert_string = ''; 
var userName = document.getElementById('first_name').value; 
var userLastName = document.getElementById('last_name').value; 
var phoneno = document.getElementById('phone_num').value; 
if(userName === "" || userName === null){ 
    alert("Please enter name"); 
} 
if(userLastName === "" || userLastName === null){ 
    alert("Please enter lastname"); 
}

（PHONENO ===「/ ^（（[0-9] {3}））であれば？[ - ]？（[0-9] {3}）[（0-9）{4}）$ /; "|| phoneno === null）{ アラート（" Please enter telephone number "）; }

else{ 
alert_string += userName + " "; 
alert_string += userLastName; 
alert_string += phoneno; 
alert(alert_string);

}}

出典

2017-03-17 James anderson

問題の句読点は読みやすくなります。フォーム検証には既に多くの質問があります（http://stackoverflow.com/search?q= [javascript] +フォーム+検証）、何を試しましたか？ – RobG

JavaはJavaScriptとは関係ありません。 – epascarello

if文を追加して、それらが有効かどうかを確認したり、html5検証を使用したりしてください。 – epascarello

ここでは、迅速かつシンプルなソリューションです。これをあなたのjavascriptコードに追加してください。それが役に立てば幸い！

function validatePhone(inputtxt) { 
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; 
return phoneno.test(inputtxt) 
} 

function formAlert() { 
    alert_string = ''; 
var userName = document.getElementById('first_name').value; 
var userLastName = document.getElementById('last_name').value; 
var phoneno = document.getElementById('phone_num').value; 
if(userName === "" || userName === null){ 
alert("Please enter name"); 
} 
if(userLastName === "" || userLastName === null){ 
alert("Please enter lastname"); 
} 
else if(!validatePhone(phoneno)){ alert("Please enter 10 digits for phone number"); } 

else{ 
alert_string += userName + " "; 
alert_string += userLastName + " "; 
alert_string += phoneno; 
alert(alert_string); 
} 
}

メールを確認するには、簡単な使用が必要です。このような何か：

<input type="email" name="email" required>

電話番号を検証するための多くの方法があります。良い例があります：信用供与：https://stackoverflow.com/a/18376246/4084160

出典

2017-03-17 01:28:04 HenryDev

あなたが行った上記の解決策のような例で、電話番号と電子メールの確認をお願いします。 –

@Jamesandersonメールをチェックする場合は、単に必須を使用してください。私の解決策を今更新しています – HenryDev

私のウェブサイトではJavaの検証を使用する必要がありますが、あなたが提供してくれたことに感謝しています。 –

これを行う方法は他にあります。多くの入力がある場合は良いアプローチです。

<html> 

<style> 
.required 
{ 
    border: 1px solid #F00; 
    padding: 2px; 
} 
</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="foo" onsubmit="formAlert(); return false;" method="POST"> 
     <p><label for="first_name">First Name<label><input     type="text" id="first_name" value="" /></p> 
     <p><label for="last_name">Last Name<label><input type="text"   id="last_name" value="" /></p> 

     <p><input type="submit" value="click me" onclick=""/></p> 
    </form> 

    <div id="msgRequired" style="display: none;"> 
    <p>required Field!</p> 
    </div> 

<script>  

function formAlert() { 
     alert_string = ''; 
     var cont = 0; 
     $("#foo input").not(':hidden').each(function() { 
     if ($(this).val() == "") { 
      $(this).addClass("required"); 
      cont++; 
     } 
     else 
     { 
      $(this).removeClass("required"); 
     } 
    }); 
     if(cont == 0) 
     { 

     alert_string = alert_string + document.getElementById('first_name').value; 
     alert_string = alert_string + ' '; 
     alert_string = alert_string + document.getElementById('last_name').value; 

     alert(alert_string); 
     $("#msgRequired").hide(); 
     } 
     else 
     { 
     $("#msgRequired").show(); 
     } 

     } 
</script> 

</html>

出典

2017-03-17 02:00:25

メールアドレスや電話番号の確認方法を教えてもらえますか？ –

@HenryDevが返信した解決策は、検証するための良い方法です。 –

答えて

関連する問題