Question

我正在为网站创建登录/注册部分。登录和注册表单在页面上。

像：

<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('');
    }
   })
   });

Answer 1

我将您的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

无需div和br来管理换行符。使用标签本身。根据需要添加display: block;。
不要使用内联样式属性。使用CSS <style>元素或外部样式表。
密码字段上没有自动完成功能。
使用HTML5的新表单输入类型。 type="email"将使浏览器本机验证该字段，并在电子邮件无效时通知用户。
保持简单。不需要腹胀。

Answer 2

由于两个函数都做同样的事情，只需创建一个函数并将其绑定到两个表单'onsubmit'事件。

你使用Mike Alsup的jQuery Form Plugin标记为jquery，jquery-style。

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 } );

此示例和更多信息here。

在一页上使用id =“submit”两次

2 个答案:

点