注册信息中电话号码格式验证，无需提交表单，光标离开即可验证

利用onblur="checkPhoneNo()"，编写JS代码

<div class="panel panel-primary firstDiv">
  <center class="panel-heading">
   <div>
    <h3 class="panel-title">
     <img src="<%=path%>/img/logo.png" width="80" height="80">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鲜花订购系统用户注册
    </h3>
   </div>
  </center>
  <div class="panel-body">
   <form class="form-horizontal" role="form" id="register"
    name="register" action="<%=path%>/registerUserAction" method="post">
    <div class="form-group">
     <label for="firstname" class="col-sm-3 control-label">用户名</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="username"
       name="username" placeholder="请输入用户名" required="required"
       onblur="checkUser()" /> <span id="span1" style="color:red;">${msgUsername}</span>
     </div>
    </div>
    <!-- 密码 -->
    <div class="form-group">
     <label for="password" class="col-sm-3 control-label">密码</label>
     <div class="col-sm-8">
      <input type="password" class="form-control" id="password"
       name="password" placeholder="请输入密码" required="required"
       pattern="[0-9]{3}" title="请输入3位的数字"> <span
       style="color:red;">${msgPassword}</span>
     </div>
    </div>
    <!-- 真实姓名 -->
    <div class="form-group">
     <label for="realname" class="col-sm-3 control-label">姓名</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="realname"
       name="realname" placeholder="请输入姓名" onblur="checkReal()">
      <span style="color:red;">${msgPassword}</span>
     </div>
    </div>
    <!-- 密保问题 -->
    <div class="form-group">
     <label for="pwdQuestion" class="col-sm-3 control-label">密保问题</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="pwdQuestion"
       name="pwdQuestion" placeholder="请输入密保问题" onblur="checkReal()">
      <span style="color:red;">${msgPassword}</span>
     </div>
    </div>
    <!-- 密保答案 -->
    <div class="form-group">
     <label for="pwdQuestionAnswer" class="col-sm-3 control-label">密保答案</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="pwdQuestionAnswer"
       name="pwdQuestionAnswer" placeholder="请输入密保答案"
       onblur="checkReal()"> <span style="color:red;">${msgPassword}</span>
     </div>
    </div>
    <!-- 地址 -->
    <div class="form-group">
     <label for="address" class="col-sm-3 control-label">地址</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="address"
       name="address"> <span style="color:red;">${msgPassword}</span>
     </div>
    </div>
    <!-- 电话 -->
    <div class="form-group">
     <label for="phoneNo" class="col-sm-3 control-label">电话</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="phoneNo"
       name="phoneNo" onblur="checkPhoneNo()">
      <td><div id="phoneNodiv"></div></td>
     </div>
    </div>
    <!-- email -->
    <div class="form-group">
     <label for="email" class="col-sm-3 control-label">email</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" id="email" name="email">
      <span style="color:red;">${msgPassword}</span>
     </div>
    </div>
    <div class="form-group">
     <div class="col-sm-offset-3 col-sm-8" style="float: left;">
      <button type="submit" class="btn btn-primary btn-lg btn-block"
       onclick="return check(this);">注册</button>
     </div>
    </div>
   </form>
  </div>
 </div>

---

JS代码如下：

  function checkPhoneNo() {
   var usernameVal = document.getElementById("phoneNo").value;

   if (!usernameVal.match(/^1\d{10}$/)) {
    document.getElementById("phoneNo").value = "";
    document.getElementById("phoneNodiv").innerHTML = "输入11位电话号码！";
    return false;
   }else{
    document.getElementById("phoneNodiv").innerHTML = "";
   }
  }
 </script>