<!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的更多相关文章

  1. Servlet(4)：一个简单的注册页面

    一. 注册要求 1. 一个注册页面 username (文本框) password:密码 (密码框) passwordYes :再次输入密码(密码框) hobby (多选框) sex (单选框) in ...

  2. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  3. AJAX实现简单的注册页面异步请求

    p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...

  4. Android笔记-4-实现登陆页面并跳转和简单的注册页面

    实现登陆页面并跳转和简单的注册页面   首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px; ...

  5. tkinter做一个简单的登陆页面

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  6. tkinter做一个简单的登陆页面（十六）

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  7. js简单的注册页面

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

  8. 使用Html和ashx文件实现其简单的注册页面

    记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序 中 一直在出错,大的问题小的问题一直出错,似乎是不在状 ...

  9. vue-cli3和element做一个简单的登陆页面

    1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...

随机推荐

  1. 「HNOI2004」「LuoguP2292」L语言（AC自动机

    题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...

  2. telnet命令发送邮件

    下面的例子是用qq的smtp服务器. set localecho 本地回显启用 smtp.qq.com Esmtp QQ Mail Server helo sis smtp.qq.com//服务器返回 ...

  3. Quicklz压缩算法

    以前对压缩算法一无所知,只是知道哈弗曼编码能做这种事情,但是感觉这样的方法奇慢无比.昨天下午看了下号称世界上最快的压缩算法Quicklz,对压缩的基本思路有了一定的了解.一般的压缩程序的要求读入文件之 ...

  4. vue-cli创建项目 一直downloading解决办法

    vue-cli创建项目: 1 安装node(需要npm,npm是node的包管理股工具) 2 安装cnpm 3 安装vue-cli       cnpm install vue-cli -g 4 创建 ...

  5. 1.大量数据导出Excel 之 多重影分身之术

    还未验证过...... 摘自:http://www.cnblogs.com/axing/archive/2012/05/25/Excel-65535.html http://www.cnblogs.c ...

  6. APP开发过程中需求变更流程

    在APP开发过程中,不可避免的会有需求变更,从以往项目开发过程总结发现,需求变更太频繁,产品一句话需求,没有形成良好的版本迭代概念,频繁的变动影响开发交付日期,但是交付日期又是定死的,严重拖累了开发及 ...

  7. shell脚本函数与数组

    前言 之前写过一篇关于shell脚本流程控制总结,这次继续写关于shell脚本的问题.本篇文章主要包含shell脚本中的函数以及数组的用法介绍.同时也涵盖了一些字符串处理以及shell脚本比较使用的小 ...

  8. 使用JavaScript选择GridView行的方法汇总

    一行: e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.gvUsers, &q ...

  9. （Android）截图批处理

    新建一个批处理文件 输入下面的内容 @echo off rem set name=%,%%,%%,%%,%%,%%,% //设置截图文件名称 set screenShotName=%,%%,%%,% ...

  10. SPOJ130 【DP·背包选取特性】

    题意: 给你n个任务,每个任务有一个起始时间,持续时间,一个权值: 问你怎么分配得到最大值 思路: 数据好大..百度了一发意识到自己好菜啊!背包的特性. dp[i]代表前 i 个能构成的最大值. 对于 ...