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

更新时间：2017年09月05日 08:20:19 作者：烟花盛典

下面小编就为大家带来一篇JS一个简单的注册页面实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

如下所示：

<!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="提交"/>
          &nbsp;<input type="reset" value="重置"/>
        </div>
      </form>
    </div>
  </body>

</html>

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

您可能感兴趣的文章:

微信小程序开发数据缓存基础知识辨析及运用实例详解
这篇文章主要介绍了微信小程序开发数据缓存基础知识辨析及运用实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
JS设计模式之访问者模式的用法详解
JS访问者模式是一种行为型设计模式,用于将算法与对象结构分离, 该模式允许你定义新的操作（访问者）而无需修改现有对象结构（被访问者）, 通过这种方式,你可以在不改变对象结构的情况下添加新的操作,本文就给大家详细的讲讲JS访问者模式的用法
2023-08-08
Javascript删除数组里的某个元素
今天小编就为大家分享一篇关于Javascript删除数组里的某个元素，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
一文深入探究JavaScript中的原型链机制
在Javascript中,每个对象都有一个指向另一个对象的链接,这个链接被称为原型链,原型链是Javascript的一种继承机制,它通过链接对象的原型对象来实现属性和方法的继承,本文小编就来和大家一起深度探索JavaScript中的原型链机制
2023-09-09
页面加载完毕后滚动条自动滚动一定位置
希望页面加载完毕后向左自动滚动一定位置，下面有个不错的方法可以轻松帮大家实现下
2014-02-02
chrome下img加载对height()的影响示例探讨
这篇文章主要介绍了chrome下img加载对height()的影响,需要的朋友可以参考下
2014-05-05
JS绘制微信小程序画布时钟
微信小程序官方组件也提供了画布功能，下面分享一下如何创建微信小程序画布时钟
2016-12-12
js跨域问题浅析及解决方法优缺点对比
所谓js跨域问题，是指在一个域下的页面中通过js访问另一个不同域下的数据对象，出于安全性考虑，几乎所有浏览器都不允许这种跨域访问，这就导致在一些ajax应用中，使用跨域的web service会成为一个问题。要解决跨域的问题，就是本文我们需要探讨的了
2014-11-11
使用FormData实现上传多个文件
这篇文章主要为大家详细介绍了使用FormData实现上传多个文件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
基于javascript处理二进制图片流过程详解
这篇文章主要介绍了基于javascript处理二进制图片流过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-06-06