个人信息表的制作（正则表达式）

HTML个人信息表制作（正则表达式）

表单内容

  <div id="d1">
    <h1>个人信息登记表</h1>

    <form id="f1" action="01.html" name="myform" onsubmit="return doSubmit()" method="post">

      登录账号：<input type="text" name="uname" onchange="checkUname()" />&emsp;6-18位有效字符（字母、数字、下划线）<br /><br />
      登录密码：<input type="text" name="password" onchange="checkPassword()" />&emsp;6-18位任意字符<br /><br />
      重复密码：<input type="text" name="rpassword" onchange="checkRpassword()" />&emsp;重复密码与登陆密码一致<br /><br />
      性&emsp;&emsp;别：<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex"
        value="female">女<nobr>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;&thinsp;必须选择一个</nobr><br /><br />
      年&emsp;&emsp;龄：<input type="text" name="age" onchange="checkAge()" />&emsp;大于0的任意两位整数<br /><br />
      手机号码：<input type="text" name="phone" onchange="checkPhone()" />&emsp;由1开头的11位整数<br /><br />
      邮&emsp;&emsp;箱：<input type="text" name="email" onchange="checkEmail()" />&emsp;有效的Email地址<br /><br />
      学&emsp;&emsp;历：<select name="education">
        <option value="无">无</option>
        <option value="小学">小学</option>
        <option value="中学">中学</option>
        <option value="大专">大专</option>
        <option value="本科" selected="selected">本科</option>
        <option value="研究生">研究生</option>
      </select>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;必须选择一个学历选项<br /><br />
      &emsp;<input type="submit" value="提交" />&emsp;<input type="reset" value="重置" />
    </form>
    <!--
      <div id="d2">
      <p>6-18位有效字符（字母、数字、下划线）</p>
      <p>6-18位任意字符</p>
      <p>重复密码与登陆密码一致</p>
      <p>必须选择一个</p>
      <p>大于0的任意两位整数</p>
      <p>由1开头的11位整数</p>
      <p>必须选择一个学历选项</p>
    </div>
  -->
  </div>

表单属性

  <style>
    #d1 {
      position: absolute;
      width: 600px;
      height: 500px;
      padding-left: 30px;
      background-color: rgb(190, 255, 255);
    }

    #d2 {
      position: absolute;
      width: 300px;
      right: 0px;
      top: 69px;
      background-color: azure;
    }
  </style>

JS部分

<script>
  //验证账号
  function checkUname() {
    var uname = document.myform.uname.value;//获取账号信息
    if (uname.match(/^\w{6,18}$/) == null) {//  \w  字母、数字、下划线
      alert("请输入6-18位有效字符（字母、数字、下划线）！");
      document.myform.uname.value = "";//输入错误清除值
      return false;
    }
    return true;
  }
  //验证密码
  function checkPassword() {
    var password = document.myform.password.value;//获取密码信息
    if (password.match(/\S{6,18}$/) == null) {//  \S任何非空字符
      alert("请输入6-18位任意字符！")
      document.myform.password.value = "";//输入错误清除值
      return false;
    }
    return true;
  }
  //密码是否一致
  function checkRpassword() {
    var password = document.myform.password.value;//获取密码信息
    var rpassword = document.myform.rpassword.value;//获取第二次密码
    if (rpassword === password) {
      return true;
    }
    document.myform.rpassword.value = "";//输入错误清除值
    alert("重复密码与登陆密码必须一致！")
    return false;
  }
  //验证年龄
  function checkAge() {
    var age = document.myform.age.value;//获取年龄信息
    if (age !== 0 && age.match(/^\d{2}$/) == null) {
      alert("请输入大于0的任意两位整数！")
      document.myform.age.value = "";//输入错误清除值
      return false;
    }
    return true;
  }
  //验证手机号
  function checkPhone() {
    var phone = document.myform.phone.value;//获取手机号信息
    if (phone.match(/^1+[1-9]{10}$/) == null) {// ^1 以1开头
      alert("请输入正确的手机号码！")
      document.myform.phone.value = "";//输入错误清除值
      return false;
    }
    return true;
  }
  //验证邮箱
  function checkEmail() {
    var email = document.myform.email.value;//获取邮箱信息
    if (email.match(/^\[e-mail]\w+(\.\w+){1,2}$/) == null) {//  \w  字母、数字、下划线
      alert("请输入正确的Email信息！");
      document.myform.email.value = "";//输入错误清除值
      return false;
    }
    return true;
  }
</script>

效果

注意：

当使用onblur事件时，如果调用alert、prompt，confirm之内的能挂起js执行的代码，可能会导致重复触发onblur事件。
这时，可以使用onchange()事件来代替onblur()事件。
Onchange方法：输入框失去焦点并且value改变之后触发。
从上面的定义可以看出触发Onchange方法需要满足两个条件，value值改变并且输入框失去焦点。这样子在ajax执行过程中如果value值没有改变而且输入框没有失去焦点是不会触发这个事件的， 这样子就不容易出现循环调用的情况。