JS 在点击提交时验证表单答案

【问题标题】：JS to validate a form on clicking submitJS 在点击提交时验证表单
【发布时间】：2013-10-12 06:09:18
【问题描述】：

我是 js 新手，我已经准备了一个使用 Angular JS 和 JQuery 的表单。代码如下：

<form id="frm1" onsubmit="return null()">
  <table>
    <tr>
      <td>First Name:</td>
      <td><input type="text" ng-model="fname" name="fname" required></td>
    </tr>
    <tr>
      <td>Last Name:</td>
      <td><input type="text" ng-model="Lname" required></td>
    </tr>
    <tr>
      <td>Email ID:</td>
      <td><input type="email" ng-model="mailid" required></td>
    </tr>
    <tr>
      <td>Password:</td>
      <td><input type="password" ng-model="pass" required></td><br/>
    </tr>
    <tr>
      <td>Confirm Password:</td>
      <td><input type="password" ng-model="Cpass" required></td>
    </tr>
    <tr>
      <td>Confirm Password:</td>
      <td><input type="password" ng-model="Cpass" required></td>
    </tr>
    <tr>
      <td>Address:</td>
      <td><textarea ng-model="address" required></textarea></td>
    </tr>
    <tr>
      <td><input type="button" value="reset" onclick="formReset()"></td>
      <td><input type="button" value="submit"></td>
      <td><input type="button" value="Close" onclick="formClose()"></td>
    </tr>
  </table>
</form>

上述形式的脚本如下：

<script type="text/javascript">
  $(document).ready(function(){
    $('a.button-submit').click(function() {
      $("#magic").show();
    });
  });  

  function formReset()
  {
    document.getElementById("frm1").reset();
  }

  function formClose()
  {
    $("#magic").hide();
  }

  function null()
  {
    var x=document.forms["frm1"]["fname"].value;
    if (x==null || x=="") 
    {
      alert("First name must be filled out");
      return false;
    }
  }
</script>

重置和关闭按钮工作正常，但问题是提交按钮验证无法正常工作。现在我只是想验证 fname 字段，它对我不起作用。我无法弄清楚这件事的确切原因。任何人都可以尝试帮助我解决这个问题。

【问题讨论】：

我在控制台中尝试过，它不允许我使用“null”，因为它是一个关键字。换个名字试试。
为什么选择使用 jQuery 而不是 Angular 来执行此验证？ Angular 有处理表单提交的机制，您可以使用数据绑定在处理提交到服务器之前轻松验证表单数据。
@izuriel 在使用 Angular js 时，显示的消息是请填写必填字段，但我想显示消息“需要名字”。

标签： javascript jquery forms validation angularjs

【解决方案1】：

代码问题列表。

切勿使用 javascript 关键字命名变量或函数。在这种情况下null
要使onsubmit 事件起作用，submit 按钮的类型应为submit 而不是button。
fname 字段中已经有 required 字段，但您仍在尝试验证它。

【讨论】：

【解决方案2】：

Dude, Use Validate Plugin for Validation
 Example:
  $(".selector").validate({
 rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
  required: true,
  email: true
     }
       }
},
  messages: {
name: "Please specify your name",
email: {
  required: "We need your email address to contact you",
  email: "Your email address must be in the format of name@domain.com"
}

} }); Validate Plugin

【讨论】：