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 和brs 来管理换行符。使用标签本身。根据需要添加display: block;。
  • 不要使用内联样式属性。使用 CSS<style>元素或外部样式表。
  • 密码字段没有自动完成功能。
  • 使用 HTML5 的新表单输入类型。type="email"将使浏览器本机验证该字段并在电子邮件无效时通知用户。
  • 把事情简单化。不需要腹胀。
于 2012-06-05T22:03:38.093 回答
1

由于两个函数做同样的事情，只需创建一个函数并将其绑定到两种形式的“onsubmit”事件。

您使用 Mike Alsup 的jQuery Form Plugin标记为 jquery，因此，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 回答