JS一个简单的注册页面实例


Posted in Javascript onSeptember 05, 2017

如下所示:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script src="js/jquery-1.8.0.min.js"></script>
  <script>
//    $(function(){
//      $("input[name='uname']").blur(function(){
//        var unamestr = $(this).val();
//        var regstr = /^[\u4e00-\u9fa5]{2,4}$/;//2到4位汉字
//        
//      });
//    });
    function checkname(){
      var regstr = /^[\u4e00-\u9fa5]{2,4}$/; //^匹配开始 $匹配结束,2到4位汉字
      var namestr = document.regform.uname.value;
      if(!regstr.test(namestr)){
        x = document.getElementById("errorname").innerHTML="必须2-4位汉字";
//        x.style.color="green";
        return false;
        
      }
      x=document.getElementById("errorname").innerHTML="格式正确";
//      x.style.color="red";
      return true;
    }
    function checkpass(){
      var regstr = /^\w{6,8}$/;//  ^匹配开始 $匹配结束   \w表示数字字母下划线
      var passstr = document.regform.upass.value;
      if(!regstr.test(passstr)){
        document.getElementById("errorpwd").innerHTML="必须是6-8位数字,字母或下划线";
        return false;
      }
      document.getElementById("errorpwd").innerHTML="格式正确";
      return true;
    }
    function checkpass2(){
      
      var passstr = document.regform.upass.value;
      var passstr2 = document.regform.upass2.value;
//      alert("fds");
      if(passstr==passstr2){
        document.getElementById("errorpwd2").innerHTML="两次密码输入一致";
        return true;
      }
      
      document.getElementById("errorpwd2").innerHTML="两次密码输入不一致";
      return false;
    }
    function checkForm(){
      if(checkname()&&checkpass()&&checkpass2())
        return true;
      return false;
    }
    var citylist = new Array();
    citylist[0] = ["海淀区","朝阳区","东城区"];
    citylist[1] = ["石家庄","邢台","邯郸","保定"];
    citylist[2] = ["郑州","开封","洛阳"];
    function changecity(prov){
      //清空选项框中的选项
      document.regform.selcity.innerHTML = "";
      if(prov == "0"){
        document.regform.selcity.innerHTML = "<option value='0'>选择城市</option>";
        return;
      }
      var provindex = parseInt(prov)-1;
      var citys = citylist[provindex];
        var optionsstr = "";
        for(var i = 0; i < citys.length; i++) {
          var city = citys[i];
          optionsstr += "<option value='" + city + "'>" + city + "</option>";
        }
        document.regform.selcity.innerHTML = optionsstr;
    }
    
  </script>
  <style>
    body {
      font-size: 14px;
    }
    
    #home {
      width: 600px;
      height: 300px;
      background-color: aquamarine;
      margin: auto;/*div居中*/
      margin-top: 50px;
      padding-top: 20px;
    }
    
    .dl1 {
      clear: both;
    }
    
    .dl1 dt {
      width: 150px;
      float: left;
      height: 30px;
      line-height: 30px;
      text-align: right;
    }
    
    .dl1 dd {
      padding-top: 8px;
      float: left;
    }
    #div1{
      padding-top: 45px;
      width: 120px;
      margin: auto;
    }
    h1{
      text-align: center;
    }
  </style>

  <body>
    
    <div id="home">
      <h1>用户注册</h1>
      <form action="index.html" name="regform" method="post" onsubmit="return checkForm()">
        <dl class="dl1">
          <dt>用户姓名 : </dt>
          <dd><input type="text" name="uname" onblur="checkname()" /></dd>
          <dd id="errorname"></dd>
        </dl>
        <dl class="dl1">
          <dt>用户密码 : </dt>
          <dd><input type="password" name="upass" onblur="checkpass()"/></dd>
          <dd id="errorpwd"></dd>
        </dl>
        <dl class="dl1">
          <dt>再次输入密码 : </dt>
          <dd><input type="password" name="upass2" onblur="checkpass2()" /></dd>
          <dd id="errorpwd2"></dd>
        </dl>
        <dl class="dl1">
          <dt>用户性别 : </dt>
          <dd>
            <input type="radio" name="sex" checked="checked" />男
            <input type="radio" name="sex" />女
          </dd>
          <dd id="errorpwd"></dd>
        </dl>
        <dl class="dl1">
          <dt>用户爱好 : </dt>
          <dd>
            <input type="checkbox" />上网
            <input type="checkbox" />读书
            <input type="checkbox" />唱歌
          </dd>
        </dl>
        <dl class="dl1">
          <dt>用户籍贯 : </dt>
          <dd>
            <select name="selprov" onchange="changecity(this.value)">
              <option value="0">选择省份</option>
              <option value="1">北京</option>
              <option value="2">河北</option>
              <option value="3">河南</option>
            </select>
          </dd>
          <dd>
            <select name="selcity">
              <option value="0">选择城市</option>
            </select>
          </dd>
        </dl>
        <div id="div1">
          <input type="submit" value="提交"/>
           <input type="reset" value="重置"/>
        </div>
      </form>
    </div>
  </body>

</html>

以上这篇JS一个简单的注册页面实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
js实现菜单跳转效果
Dec 11 Javascript
基于react组件之间的参数传递(详解)
Sep 05 #Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 #Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 #Javascript
JS沙箱模式实例分析
Sep 04 #Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 #Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 #Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 #Javascript
You might like
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python opencv如何实现图片绘制
2020/01/19 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
物控部经理职务说明书
2014/02/25 职场文书
环境整治工作方案
2014/05/18 职场文书
八项规定对照检查材料
2014/08/31 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
2014年宣传工作总结
2014/11/18 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL