0

サイトへのログイン/登録部分を作成しています。また、ログインフォームと登録フォームはページにあります。

好き：

<form name="loginform" style="text-align:center;" method="post" onsubmit="return validateForm();" action="index.php">
                <div class="row">
                        <input type="text" name="email" id="email" autocomplete="off" placeholder="Email Address" />
                </div>
                <br />
                <div class="row">
                        <input type="password" name="password" id="password" autocomplete="off" placeholder="Password" />
                </div>
                <br />
                <div class="row">
                    <button id="submit" type="submit" class="button large arrow-type-2 dark">Log Me In</button>
                </div>
            </form>


<form name="registerform" style="text-align:center;" method="post" onsubmit="return validatethisForm();" action="index.php">
                    <div class="row">
                            <input type="text" name="email" id="email2" autocomplete="off" placeholder="Email Address"/>
                    </div>
                    <br />
                    <div class="row">
                            <input type="password" name="password" id="password2" autocomplete="off" placeholder="Password"/>
                    </div>
                    <br />
                    <div class="row">
                        <button id="submit" type="submit" class="button large arrow-type-2 dark">Create Free Account</button>
                    </div>
                </form>

私のJs検証は:(作業が必要です）

function validateForm()
        {
        var x=document.forms["loginform"]["email"].value;
        var atpos=x.indexOf("@");
        var dotpos=x.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
          {
          alert("Not a valid e-mail address");
          return false;
          }
         var x=document.forms["loginform"]["password"].value;
            if (x==null || x=="")
              {
              alert("Please enter a Password");
              return false;
              }
        }
        function validatethisForm()
        {
        var x=document.forms["registerform"]["email2"].value;
        var atpos=x.indexOf("@");
        var dotpos=x.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
          {
          alert("Not a valid e-mail address");
          return false;
          }
         var x=document.forms["registerform"]["password2"].value;
            if (x==null || x=="")
              {
              alert("Please enter a Password");
              return false;
              }
        }

私が抱えている問題はページの検証です。すべてが完璧に機能します。ただし、送信IDが重複しているため、これをクリーンアップする必要があります。

上記の私のコードを改善するための提案を提供できますか？

/////////////////////////////////////////

使用：クロスブラウザプレースホルダーの以下のコード

$('[placeholder]').focus(function() {
var input = $(this);
 if (input.val() == input.attr('placeholder')) {
   input.val('');
   input.removeClass('placeholder');
  }
  }).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
   }
  }).blur().parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
   var input = $(this);
   if (input.val() == input.attr('placeholder')) {
     input.val('');
    }
   })
   });
4

2 に答える 2

2

HTMLコードを次のように簡略化しました。

<form name="loginForm" method="post" onsubmit="return validateForm();" action="index.php">
    <label>Email Address: <input type="email" name="email" autocomplete="off" placeholder="Email Address"/></label>
    <label>Password: <input type="password" name="password" placeholder="Password"/></label>
    <button type="submit" class="button large arrow-type-2 dark">Log In</button>
</form>


<form name="registerForm" method="post" onsubmit="return validatethisForm();"
      action="index.php">
    <label>Email Address: <input type="email" name="email" autocomplete="off" placeholder="Email Address"/></label>
    <label>Password: <input type="password" name="password" placeholder="Password"/></label>
    <button type="submit" class="button large arrow-type-2 dark">Create Free Account</button>
</form>

ポイント

  • 常にラベルを含めてください。すべてのブラウザがHTML5プレースホルダーをサポートしているわけではありません。

  • ここにあるすべてのIDは気が進まない。フォームには次の方法でアクセスできます

    var loginForm = document.forms.loginForm; //By name

    とフォーム要素によって

    loginForm.email; //Also by name
  • 改行を管理するためにdivsとsは必要ありません。brラベル自体を使用してください。必要に応じて追加display: block;します。
  • インラインスタイル属性は使用しないでください。CSS<style>要素または外部スタイルシートを使用します。
  • パスワードフィールドにはオートコンプリートはありません。
  • HTML5の新しいフォーム入力タイプを使用します。type="email"ブラウザにフィールドをネイティブに検証させ、電子メールが無効な場合はユーザーに通知します。
  • 単純にする。膨満感の必要はありません。
于 2012-06-05T22:03:38.093 に答える
1

両方の関数は同じことを行うので、1つの関数を作成し、それを両方のフォームの「onsubmit」イベントにバインドするだけです。

タグ付けしたのは、Mike AlsupのjQueryフォームプラグインを使用して、jquery、so、jqueryスタイルです。

function validate(formData, jqForm, options) { 
    // formData is an array of objects representing the name and value of each field 
    // that will be sent to the server;  it takes the following form: 
    // 
    // [ 
    //     { name:  username, value: valueOfUsernameInput }, 
    //     { name:  password, value: valueOfPasswordInput } 
    // ] 
    // 
    // To validate, we can examine the contents of this array to see if the 
    // username and password fields have values.  If either value evaluates 
    // to false then we return false from this method. 

    for (var i=0; i < formData.length; i++) { 
        if (!formData[i].value) { 
            alert('Please enter a value for both Username and Password'); 
            return false; 
        } 
    } 
    alert('Both fields contain values.'); 
}
$('form').ajaxForm( { beforeSubmit: validate } );

この例と詳細はこちら。

于 2012-06-05T21:56:18.910 に答える