JavaScript的应用举例

yztc.c

已于 2022-09-08 12:38:56 修改

阅读量452

点赞数

文章标签： javascript 前端 servlet

于 2022-09-08 12:26:23 首次发布

本文链接：https://blog.csdn.net/m0_62536346/article/details/126762192

版权

制作一个用户注册页面practice1_3.html，具体要求如下：（1）有常用的登录账号、密码、确认密码、姓名、身份证号码（只考虑18位的身份证）、出生年月日、住址、邮编、E-mail等输入区域（自己设定）。（2）自己设定验证规则，在提交时检验是否符合要求，用alert提醒出非法的输入，并将焦点返回要输入的控件对象。（3）根据出生年月日判断身份证号码是否合法（只考虑18位身份证）。（4）其他验证：登录账号只能是字母或数字且以字母开头；密码要在8位以上且需要有字母和数字之外的字符；出生年月日的格式为yyyy-mm-dd；邮编为6位数字；E-mail的基本格式验证。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <link rel="stylesheet" href="register.css" />
  </head>

  <body>
    <div class="box">
      登录账号<input type="text" name="" class="fore account" /><br />
      密码<input type="password" name="" class="two psw" /><br />
      确认密码<input type="password" name="" class="fore psw2" /><br />
      姓名<input type="text" name="" class="two" /><br />
      身份证号<input type="text" class="fore sfz" /><br />
      出生日期<input type="date" class="fore dateOfBirth" /><br />
      邮编<input type="text" class="two postcode" /><br />
      E-mail<input type="email" class="two1" /><br />
      <input type="button" value="提交" class="btn" />
    </div>
  </body>
  <script>
    var btn = document.querySelector('.btn')
    var account = document.getElementsByClassName('account')[0]
    let first_username = account.value[0]
    let dateOfBirth = document.getElementsByClassName('dateOfBirth')[0]
    var reg = /^[0-9a-zA-Z]$/
    var regPSW = /^[a-zA-Z0-9]+$/
    var regID = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    var regEmal = /^[1-9][0-9]{4,10}@qq.com$/
    btn.addEventListener('click', function () {
      var psw = document.getElementsByClassName('psw')[0]
      var psw2 = document.getElementsByClassName('psw2')[0]
      if (psw.value != '') {
        if (psw.value.length < 8) {
          alert('请输入8位以上的密码')
          psw.focus()
        } else if (!regPSW.test(psw.value)) {
          console.log(psw.value)
          alert('密码需要有字符，字母，数字')
          psw.focus()
        }
      }
      if (psw2.value != psw.value) {
        alert('密码不一致')
        psw2.focus()
      }
      var sfz = document.getElementsByClassName('sfz')[0]
      if (sfz.value != '') {
        var time = dateOfBirth.value.substring(2, dateOfBirth.value.length).replace('-', '').replace('-', '')
        let result = sfz.value.substring(8, 14)
        if (!regID.test(sfz.value)) {
          alert('输入身份证有误')
          sfz.focus()
        } else if (time !== result) {
          alert('出生日期与身份证输入不符')
        }
      }
      var postcode = document.getElementsByClassName('postcode')[0]
      if (postcode.value != '') {
        if (postcode.value.length == 5) {
          alert('邮编要输入6位数')
          postcode.focus()
        }
      }
      var Emal = document.getElementsByClassName('two1')[0]
      if (Emal.value != '') {
        if (!regEmal.test(Emal.value)) {
          alert('请输入正确的邮箱号')
          Emal.focus()
        }
      }
    })
    account.oninput = ({ target }) => {
      first_username = target.value[0]
      if (!reg.test(first_username)) {
        alert('用户名首个字符必须为字母')
      }
    }
  </script>
</html>

运行结果