注册表单js验证功能

最新推荐文章于 2023-02-05 11:45:00 发布

PJ_boy

最新推荐文章于 2023-02-05 11:45:00 发布

阅读量446

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/pj_boy/article/details/115828840

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码如下


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <style>
    #div1{
      width:400px;
      border:1px solid black;
    }
    span{
      color: red;
    }
  </style>
  <div id="div1">
    <h1>用户信息注册</h1>
    <form action="" onsubmit="return check()">
      用户名：<input onblur="usernameCheck()" id="username" name="username" type="text" placeholder="请输入用户名"><span id="usernameSpan"></span><br>
      密码：<input onblur="password1Check()" id="password1" name="password" type="text" placeholder="请输入密码"><span id="password1Span"></span><br>
      确认密码：<input onblur="password2Check()" id="password2" name="password2" type="text" placeholder="请再次确认密码"><span id="password2Span"></span><br>
      <!-- 单选框 -->
      <div>性别:
        <label><input type="radio" checked="checked" name="sex" value="男生">男生</label>
        <label><input type="radio" name="sex" value="女生">女生</label>
      </div>
      <br>

      手机号：<input onblur="numberCheck()" id="number" name="number" type="text" placeholder="请输入手机号"><span id="numberSpan"></span><br>
      E-mail:<input onblur="emailCheck()" id="email" name="email" type="email" placeholder="请输入邮箱"><span id="emailSpan"></span><br>
      <!-- 单选框 -->
      <div>专业：
        <label><input type="radio" checked="checked"  name="major" value="计科大数据">计科大数据</label>
        <label><input type="radio" name="major" value="软件工程">软件工程</label>
        <label><input type="radio" name="major" value="物联网">物联网</label>
      </div>
      <br>
      <!-- 单选框 -->
      <div>政治面貌:
        <label><input type="radio" checked="checked" name="politics" value="党员">党员</label>
        <label><input type="radio"  name="politics" value="团员">团员</label>
        <label><input type="radio"  name="politics" value="群众" >群众</label>
      </div>
      <input type="button" onclick="check()"  value="提交"><input value="取消" type="reset">
    </form>
  </div>
  </body>
  <script type="text/javascript">
      function usernameCheck() {
          var username = document.getElementById("username");
          var username = document.getElementById("username").value;
          username = username.replace(/\s*/g,"");//	去除空格  防止用户误点
          if(username == ""){
              document.getElementById("usernameSpan").innerText="用户名不能为空";
          }
      }
      function password1Check() {
          var password1 = document.getElementById("password1");
          var password1 = document.getElementById("password1").value;
          password1 = password1.replace(/\s*/g,"");
          if (password1.length < 6){
              document.getElementById("password1Span").innerText="密码至少六位";
          }
      }
      function password2Check() {
          var password2 = document.getElementById("password2");
          var password2 = document.getElementById("password2").value;
          password2= password2.replace(/\s*/g,"");
          if (password2.length < 6){
              document.getElementById("password2Span").innerText="密码至少六位";
          }
      }

      function numberCheck() {
          var number = document.getElementById("number"); //要验证的对象
          if(!(/^1[34578]\d{9}$/.test(number.value))){
              document.getElementById("numberSpan").innerText="手机号码有误，请重填";
          }
      }

      function emailCheck() {
          var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
          var obj = document.getElementById("email"); //要验证的对象
          if(obj.value === ""){ //输入不能为空
              document.getElementById("emailSpan").innerText="输入不能为空";
          }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
              document.getElementById("emailSpan").innerText="正则验证不通过，邮箱格式不对";
          }
      }

      function check(){
          //获取控件内容
          var username = document.getElementById("username").value;
          var password1 = document.getElementById("password1").value;
          var password2 = document.getElementById("password2").value;
          var number = document.getElementById("number").value;
          username = username.replace(/\s*/g,"");//	去除空格  防止用户误点
          password1 = password1.replace(/\s*/g,"");
          password2 = password2.replace(/\s*/g,"");
          number = number.replace(/\s*/g,"");
          if(username == ""){
              alert("用户名不能为空");
              document.getElementById("usernameSpan").innerText="";
              document.getElementById("username").focus();//获取焦点
              return false;
          }
          if(password1 == ""){
              alert("密码不能为空");
              document.getElementById("password1Span").innerText="";
              document.getElementById("password1").focus();
              return false;
          }
          if(password2 == ""){
              alert("密码不能为空");
              document.getElementById("password2Span").innerText="";
              document.getElementById("password2").focus();
              return false;
          }
          if (password1.length < 6){
              alert("密码至少六位");
              document.getElementById("password1Span").innerText="";
              document.getElementById("password1").focus();
              return false;
          }
          if (password2.length < 6){
              alert("密码至少六位");
              document.getElementById("password2Span").innerText="";
              document.getElementById("password2").focus();
              return false;
          }
          if (password1.valueOf() != password2.valueOf()){
              alert("前后密码不一致");
              document.getElementById("password2").focus();
              return false;
          }
          if(!(/^1[34578]\d{9}$/.test(number))){
              alert("电话号码格式不对");
              document.getElementById("numberSpan").innerText="";
              document.getElementById("number").focus();
              return false;
          }
          var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
          var obj = document.getElementById("email"); //要验证的对象
          if(obj.value === ""){ //输入不能为空
              alert("邮箱输入不能为空");
              document.getElementById("emailSpan").innerText="";
              document.getElementById("email").focus();
              return false;
          }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
              alert("正则验证不通过，格式不对");
              document.getElementById("emailSpan").innerText="";
              document.getElementById("email").focus();
              return false;
          }
          //验证成功
          alert("提交成功！")
          return true;
      }
  </script>
</html>

PJ_boy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
注册表单js验证功能

代码如下<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title> </head> <body> <style> #div1{ width:400px; border:1px solid black;
复制链接

扫一扫

专栏目录