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 相关文章推荐
JS的反射问题
Apr 07 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
基于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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
PHP中常用数组处理方法实例分析
2008/08/30 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
纯php生成随机密码
2015/10/30 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Python虚拟环境venv用法详解
2020/05/25 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
JSF界面控制层技术
2013/06/17 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏