javascript - 客户端错误检查不起作用

Question

我有以下内容:

基本上只是名为 regForm 的表单中的两个输入字段的 html 代码:

<div>
   <label for="regName">
      <span>Name</span>
      <span class="error" 
         ng-show="regCheckNamesMessage">{{regCheckNamesMessage}}</span>
  </label>
  <div>
     <span class="inputIcon"><i class="fa fa-fw fa-user"></i></span>
     <input autocomplete="off"
         id="regFirstName"
         name="regFirstName"
         ng-change="regCheckNames(regForm.regFirstName, regForm.regLastName)"
         ng-model="regFirstName"
         ng-required="true"
         ng-minlength="2"
         placeholder="First Name"/>
     <input autocomplete="off"
         id="regLastName"
         name="regLastName"
         ng-change="regCheckNames(regForm.regFirstName, regForm.regLastName)"
         ng-model="regLastName"
         ng-required="true"
         ng-minlength="2"
         placeholder="Last Name"
         type="text" />
  </div>
</div>

我有以下 javascript 代码可以检查必填字段:

regCheckNames = (regFirstName, regLastName) => {   
   if (regFirstName.$dirty == true && regLastName.$dirty == true) {
        if (regFirstName.$error.required == true && regLastName.$error.required == true) {
            this.regCheckNamesMessage = "Both are required";
        } else {
            this.regCheckNamesMessage = "";
        }
    }

    if (regFirstName.$dirty == true && regLastName.$dirty == false) {
        if (regFirstName.$error.required == true)
            this.regCheckNamesMessage = "First name is required";
        else
            this.regCheckNamesMessage = "";
    }

    if (regFirstName.$dirty == false && regLastName.$dirty == true) {
        if (regLastName.$error.required == true)
            this.regCheckNamesMessage = "Last name is required";
        else
            this.regCheckNamesMessage = "";
    }
}

不知何故，检查代码没有按照我期望的方式工作。我希望错误 Both are required 在用户触摸字段后将两个字段留空时出现，错误 First name is required 当用户触摸 first name 字段但是留空等等。任何人都可以指出我正确的方向吗？

Answer 1

你需要它是一个 if else。否则，当两个字段都变脏时，第三条错误消息将覆盖之前的错误。

regCheckNames = (regFirstName, regLastName) => {   
   if (regFirstName.$dirty == true && regLastName.$dirty == true) {
        if (regFirstName.$error.required == true && regLastName.$error.required == true) {
            this.regCheckNamesMessage = "Both are required";
        } else {
            this.regCheckNamesMessage = "";
        }
    } else if (regFirstName.$dirty == true && regLastName.$dirty == false) {
        if (regFirstName.$error.required == true)
            this.regCheckNamesMessage = "First name is required";
        else
            this.regCheckNamesMessage = "";
    } else if (regFirstName.$dirty == false && regLastName.$dirty == true) {
        if (regLastName.$error.required == true)
            this.regCheckNamesMessage = "Last name is required";
        else
            this.regCheckNamesMessage = "";
    }
}