注册文件 reg.html

<html>
<style>
  #btn{
    background-color: red;
    color:white;
    width: 235px;
   }
  span{
    color: red;
  }
</style>
<center>
  <form action="doreg.php" method="post" >
  <table>
    <tr>
      <td>用户名</td>
      <td>
        <input type="text" name="username" onblur="check_user()">
        <span id='username'></span>
      </td>
    </tr>
    <tr>
      <td>密码</td>
      <td>
        <input type="password" name="pwd" onblur="check_pwd()">
        <button onclick="return showpwd()">显示密码</button>
        <span id='pwd'></span>
      </td>
    </tr>
    <tr>
      <td>确认密码</td>
      <td><input type="password" name="repwd" onblur="check_repwd()">
      <span id='repwd'></span>
      </td>
    </tr>
    <tr>
      <td>手机号</td>
      <td>
        <input type="text" name="tel" onblur="check_tel()">
        <span id='tel'></span>
      </td>
      </tr>
      <tr>
        <td>验证码</td>
        <td>
          <input type="code" name="code">
          <button onclick="return reflush()">刷新验证码</button>
          <span id='code'></span>
        </td>
      </tr>
    </table>
    <input type="checkbox" name="agree">我已阅读并同意 <br>
    <button id="btn" onclick="return checkall()">立即注册</button>
  </form>
</center>
</html>
<script>
// 验证码
  window.onload=function(){
    reflush();
  }
  function reflush(){
    var randnum = 1000+Math.floor(Math.random()*9000)
    document.getElementById('code').innerHTML=randnum;
    return false;
  }
// 显示密码
  function showpwd(){
    node = document.getElementsByName('pwd')[0];
    node.type = "text";
    return false;
  }
// 验证用户名
  function check_user() {
    var username = document.getElementsByName('username')[0].value;
    var ptn_username = /^[(\u4e00-\u9fa5)||\w]{6,10}$/i;
    if (!username.match(ptn_username)) {
      document.getElementById('username').innerHTML='用户名格式不正确';
      return false;
    }
    document.getElementById('username').innerHTML='';
    return true;
  }
// 验证密码
  function check_pwd() {
    var pwd = document.getElementsByName('pwd')[0].value;
    var ptn_pwd = /^\w{6,10}$/i;
    if (!pwd.match(ptn_pwd)) {
      document.getElementById('pwd').innerHTML='密码格式不正确';
      return false;
    }
    document.getElementById('pwd').innerHTML='';
    return true;
  }
// 两次密码一致
  function check_repwd(){
    var pwd = document.getElementsByName('pwd')[0].value;
    var repwd = document.getElementsByName('repwd')[0].value;
    if (pwd!=repwd) {
      document.getElementById('repwd').innerHTML='两次密码不一致';
      return false;
    }
    document.getElementById('repwd').innerHTML='';
    return true;
  }
// 验证手机号
  function check_tel() {
    var tel = document.getElementsByName('tel')[0].value;
    var ptn_tel = /^1[35789]\d{9}$/i;
    if (!tel.match(ptn_tel)) {
      document.getElementById('tel').innerHTML='手机号格式不正确';
      return false;
    }
    document.getElementById('tel').innerHTML='';
    return true;
  }
// 阅读协议
  function check_agree(){
    var flag = document.getElementsByName('agree')[0].checked;
    if(!flag){
      alert('请先阅读注册说明书');
    }
    return flag;
  }

// 刷新产生验证码
  function check_code(){
    var code = document.getElementsByName('code')[0].value;
    var span_code = document.getElementById('code').innerHTML;
    if (!code) {
      alert('请点击刷新生成验证码')
    }
    if (code!=span_code) {
      alert('验证码不正确')
      return false;
    }
    return true;
  }

// 表单提交
  function checkall(){
    var check = check_code()&&check_user()&&check_pwd()&&check_repwd()&&check_tel()&&check_agree();
    return check;
  }
</script>

原始js---JavaScript注册用正则验证用户名密码手机号邮箱验证码的更多相关文章

  1. Ajax实现注册无刷新验证用户名是否存在

    1. [代码][JavaScript]代码     ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...

  2. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. 记录下 js各种证件的正则验证

    身份证 /(^\d{15}$)|(^\d{17}([0-9]|X)$)/    护照 /^[a-zA-Z0-9]{3,21}$/   /^(P\d{7})|(G\d{8})$/    军官证或士兵证 ...

  4. Javascript 正则验证带 + 号的邮箱地址

    很多邮箱地址是可以加上 + 加号为同一个邮箱地址. 比如 Gmail. 如果需要验证带 + 号的邮箱,如下: str = "65485+55@gmail.com"; documen ...

  5. php ajax 同时验证 用户名 密码

    今天写了一个程序分享给大家,该程序是ajax密码和用户名验证问题 第一步 先在数据库里建立一张表 有3个字段 为 id name pass 第二步 写html页面,需要引入jq库 请到官网自行下载 & ...

  6. java在线聊天项目 客户端登陆窗口LoginDialog的注册用户功能 修改注册逻辑 增空用户名密码的反馈 增加showMessageDialog()提示框

    LoginDialog类的代码修改如下: package com.swift.frame; import java.awt.EventQueue; import java.awt.event.Acti ...

  7. ajax异步验证用户名密码,提示路径错误

    使用thinkphp框架异步验证用户名和密码的时候,ajax路径错误可能有多重情况.我遇到的是,我自感路径没问题,且先前使用无错.由于多人合作使用svn,所以在更新代码后,使用firebug显示一直是 ...

  8. javaweb从mysql中获取数据验证用户名密码成功跳转,失败重新验证

    要求:validate.jsp页面中获取请求参数(request.getparameter(“name属性的值”)),注意中文参数获取之前要设置请求编码(request.setCharaterEnco ...

  9. 04 . Go+Vue开发一个线上外卖应用(用户名密码和图形验证码)

    图形化验证码生成和验证 功能介绍 在使用用户名和密码登录功能时,需要填写验证码,验证码是以图形化的方式进行获取和展示的. 验证码使用原理 验证码的使用流程和原理为:在服务器端负责生成图形化验证码,并以 ...

随机推荐

  1. @JsonView的使用

    1.使用场景 在某一些请求返回的JSON中,我们并不希望返回某些字段.而在另一些请求中需要返回某些字段. 例如: 在查询列表请求中,不返回password字段 在获取用户详情中,返回password字 ...

  2. 初识Go语言--(2)Hello World

    新建hello.go文件,内容如下 package main import "fmt" func main() { //输出Hello World fmt.Println(&quo ...

  3. 2019年12月的第一个bug

    现在是2019年12月1日0点27分,我的心情依旧难以平静.这个月是2019年的最后一个月,是21世纪10年代的最后一个月,也是第一批90后30岁以前的最后一个月.就是在这个月的第一天的0点0分,我写 ...

  4. MediaWiki上传文件大小设置

    一.概述 MediaWiki默认最大上传文件大小为2M,碰到文件较大需要修改这个限制,需要改为8M. 二.修改php.ini 使用docker运行的MediaWiki,默认是没有php.ini这个文件 ...

  5. SFTP 定时任务下载

    1.上传 winscp.exe /console /command "option batch continue" "option confirm off" & ...

  6. Java面试-TCP连接及其优化

    作为一个后端程序员,网络连接这块是一个绕不过的砍,当你在做服务器优化的时候,网络优化也是其中一环,那么作为网络连接中最基础的部分-TCP连接你了解吗?今天我们来仔细看看这个部分. TCP建立连接-三次 ...

  7. service的yaml说明

    apiVersion: v1 kind: Service metadata: name: nginx-service labels: app: nginx spec: ports: - port: 8 ...

  8. 第一次有人把 5G 讲的这么简单明了

    一个简单且神奇的公式    今天的故事,从一个公式开始讲起.这是一个既简单又神奇的公式.说它简单,是因为它一共只有 3 个字母.而说它神奇,是因为这个公式蕴含了博大精深的通信技术奥秘,这个星球上有无数 ...

  9. 【转】西门子PLC以太网 通讯协议 解析

    一直想把三菱和西门子这两个使用频率最高的PLC上位通讯,融合到WCS系统的框架里: 现在三菱主流使用Q系列,使用的是MC协议, 前一段时间也写过一个入门介绍: 三菱Q系列通讯方式设计说明 去年8月份, ...

  10. 【ELK】7. elasticsearch linux上操作es命令详解

    ========== 1.检查ES节点是否正常启动 curl http://192.168.6.16:9200 正常状态: 非正常状态: 1>确保服务是不是正常启动了,端口用的是哪个 2> ...