Question

我正在使用javascript生成表单，然后提供一些表单验证。这是代码

点击注册按钮后生成表单

    register() {
        //console.log('show me a registration form here!');
        this.nevermind('LoginForm');
        this.nevermind('RegistrationForm');
        const regform = document.createElement('div');
        regform.className = 'RegistrationForm';
        regform.innerHTML = '<h2 style="margin:0px;padding:4px;font-
       size:1.2em;text-
        align:center;background:#eee;">PATRIC User Registration</h2>' +
        '<form class=""><div style="padding:2px; margin:10px;"><table><tbody>' +
        //'<tr><th>USERNAME</th></tr><tr><td><input type="text" name="username" 
        style="width:150px;"></td></tr>' +
        '<tr><th>First Name <span style="color:red">*</span></th><th>Last Name 
       <span 
        style="color:red">*</span></th></tr><tr><td>' +
        '<input class="firstname" type="text" name="first_name" 
       style="width:300px;" 
        onchange="registerClass.validateReg()">' +
        '</td><td><input class="lastname" type="text" name="last_name" 
        style="width:300px;" onchange="registerClass.validateReg()">' +
        '</td></tr><tr><th colspan="1">Email Address <span style="color:red">*
        </span></th></tr><tr><td colspan="1">' +
        '<input class="email" type="email" name="email" style="width:100%;" 
        onchange="registerClass.validateReg()" required>' +
        '</td></tr><tr><th colspan="1">Password <span style="color:red">*</span>
        </th></tr><tr><td colspan="1">' +
        '<input class="password" pattern=".{8,}" title="8 characters minimum" 
        type="password" name="password" style="width:100%;" 
        onchange="registerClass.validateReg()" 
      onfocus="registerClass.validateReg()" 
        onkeydown="registerClass.validateReg()" 
        onkeyup="registerClass.validateReg()"required>' +
        '</td></tr><tr><th colspan="2">Organization</th></tr><tr><td 
      colspan="2">
        <div style="width:100%"><input class="organization" type="text" 
        name="affiliation" value=""></div></td></tr>' +
        '<tr><th colspan="2">Organisms</th></tr><tr><td colspan="2"><div><input 
        class="organisms" type="text" name="organisms" value=""></div></td>
   </tr>' +
        '<tr><th colspan="2">Interests</th></tr><tr><td colspan="2"><div>
   <textarea 
        class="interests" rows="5" cols="50" name="interests" 
   style="height:75px;" 
        value=""></textarea></div></td></tr>' +
        '</tbody></table><p><span style="color:red">*</span> <i>Indicates 
   required 
        field</i></p></div><div style="text-
     align:center;padding:2px;margin:10px;">' 
        +
        '<div><button type="button" class="registerbutton" 
        onclick="registerClass.createUser()" style="display:none; margin-
        bottom:-22px">Register New User</button>' +
        '<button type="button"   
       onclick="registerClass.nevermind(&apos;RegistrationForm&apos;)">Cancel'+'
       </button>
        </div></div></form>' +
        '<div class="registererror" style="color:red"></div>';
        const home = document.getElementsByClassName('home');
        home[0].insertBefore(regform, home[0].childNodes[0]);
        //console.log(home[0].firstChild);
         }

在用户进入上述注册表单

时验证表单

  validateReg() {
    //console.log('validating reg');
    let fname = document.getElementsByClassName('firstname')[0].value;
    let lname = document.getElementsByClassName('lastname')[0].value;
    let email = document.getElementsByClassName('email')[0].value;
    let validemail = document.getElementsByClassName('email')[0];
    let password = document.getElementsByClassName('password')[0].value;
    let validpass = document.getElementsByClassName('password')[0];
    let registbutton = document.getElementsByClassName('registerbutton')[0];
    if (fname !== '' && lname !== '' && email !== '' && password !== '') {
      if (validemail.checkValidity() && validpass.checkValidity()) {
        registbutton.style.display = 'block';
      } else {
        registbutton.style.display = 'none';
      }
    } else {
      registbutton.style.display = 'none';
    }
  }

这是失败的测试，无法在单元测试中检查电子邮件的Valitidy（）（在表单中正常工作）

    test('shows the submit butten when registration form is valid', () => {
  document.body.innerHTML = '<div class="home"></div>';
  reg.register();
  document.getElementsByClassName('firstname')[0].value = 'Joe';
    document.getElementsByClassName('lastname')[0].value = 'Smith';
    document.getElementsByClassName('email')[0].value = 'joe@smith.com';
    document.getElementsByClassName('password')[0].value = '123456789';
  reg.validateReg();
let registbutton = document.getElementsByClassName('registerbutton')[0];
  expect(registbutton.style.display).toBe('block');
});

Answer 1

这就是我所做的一切，但仍然有点想知道为什么我们不能调用checkValidity（）

const mockvalidity = function() {
    return true;
  };
  document.getElementsByClassName('password')[0].checkValidity = mockvalidity;
  document.getElementsByClassName('email')[0].checkValidity = mockvalidity;

Jest单元测试因TypeError失败：validemail.checkValidity不是函数，如何修复

1 个答案: