JAVA半期考核

网页

<div class="row">
          <label for="username"><span class="required">*span>账号：label>
          <input id="username" type="text" value="2019110401"/>
        div>
        <div class="row">
          <label for="password"><span class="required">*span>密码：label>
		  <input id="password" type="password" placeholder="密码" />
        div>
        <div class="row">
          <label for="verifyPass"><span class="required">*span>确认密码：label>
          <input id="verifyPass" type="password" placeholder="确认密码" />
        div>
        <div class="row">
          <label for="qq"><span class="required">*span>QQ：label>
          <input id="qq" type="text" placeholder="QQ号码" />
        div>
        <div class="row">
          <label for="gender"><span class="required">*span>性别：label>
          <input type="radio" name="gender" value="male" />男
          <input type="radio" name="gender" value="female" />女
        div>
        <div class="row sub">
          <input type="submit" value="注册" />
        div>

样式

html,
body {
     
height: 100%;
width: 100%;
background-color: #2b4b6b;
border: 0px;
margin: 0px; /* 内外边距0px */
display: flex;
}

.login_box {
     
width: 450px;
height: 425px;
margin: auto; /* 水平居中 */
align-self: center; /* 垂直居中 */
background-color: white;
border-radius: 10px;
}

.title {
     
width: 100%;
height: 60px;
text-align: center;
padding-top: 20px;
color: #2b4b6b;
}

#login_form {
     
width: 100%;
padding: 0px 20px;
display: flex;
flex-direction: column;
}

.row {
     
height: 40px;
line-height: 40px;
margin-top: 15px; 
}

.row label {
     
display: inline-block;
width: 120px;
height: 40px;
text-align: right;
}

.row label span {
     
color: red;
font-size: 20px;
margin-right: 5px;
}

.row input[type="text"],
.row input[type="password"] {
     
width: 200px;
height: 40px;
border-radius: 4px;
border: 1px solid #dcdee0;
padding: 0px 16px;
color: #888;
margin-bottom: 20px;
}
.row input[type="text"]:hover,
.row input[type="password"]:hover {
     
border-color: #27a9e3;
}
.row input[type="text"]:focus,
.row input[type="password"]:focus {
     
outline-color: #27a9e3;
}

/* .row input[type="radio"] {
height: 40px;
} */
.sub{
     
width: 100%;
display: flex;
justify-content: center;
}

.sub input {
     
width: 30%;
height: 40px;
font-size: 16px;
cursor: pointer;
background-color: #27a9e3;
color: #fff;
border: none;
padding: 0px;
}

Js部分

function checkForm(){
     
  let inputs = myform.getElementsByTagName("input")
  console.log(inputs);
  let username = inputs[0].value;
  if(username.length < 5){
     
    $.toast({
     
      heading:'账号不能少于5个字符!',
      icon: 'error',
      position: 'top-center'
    })
    return false;
  }
  let password = inputs[1].value;
  if (password.length < 7) {
     
    $.toast({
     
      heading:'密码不能少于7个字符!',
      icon: 'error',
      position: 'top-center'
    })
    return false;
  }
  let verifyPass = inputs[2].value;
  if (verifyPass != password) {
     
    $.toast({
     
      heading:'两次输入的密码必须一致',
      icon: 'error',
      position: 'top-center'
    })
    return false;
  }
  let qq = inputs[3].value;
  if (isNaN(qq)) {
     
    $.toast({
     
      heading:'QQ号不能输入非数字',
      icon: 'error',
      position: 'top-center'
    })
    return false;
  }
  let male = inputs[4].checked;
  let female = inputs[5].checked;
  if (!male && !female ) {
     
    $.toast({
     
      heading:'性别必须选择一个',
      icon: 'error',
      position: 'top-center'
    })
    return false;
  }
}