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自动打开页面上链接的实现代码
Sep 25 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
详解ES6中的let命令
2020/04/05 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
python SVD压缩图像的实现代码
2019/11/05 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
薇姿法国官网:Vichy法国
2021/01/28 全球购物
房地产促销活动方案
2014/03/01 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
农行心得体会
2014/09/02 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL