一个简单的注册页面,基于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的更多相关文章

Servlet(4)：一个简单的注册页面
一. 注册要求 1. 一个注册页面 username (文本框) password:密码 (密码框) passwordYes :再次输入密码(密码框) hobby (多选框) sex (单选框) in ...
Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
AJAX实现简单的注册页面异步请求
p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...
Android笔记-4-实现登陆页面并跳转和简单的注册页面
实现登陆页面并跳转和简单的注册页面首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px; ...
tkinter做一个简单的登陆页面
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
tkinter做一个简单的登陆页面（十六）
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
js简单的注册页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
使用Html和ashx文件实现其简单的注册页面
记得上一次博客中实现的是其登录页面,其实学会了登录页面,注册页面自然就知道怎么写啦,都是一个意思的,但是今天不知道怎么个情况,写一个注册页面程序中一直在出错,大的问题小的问题一直出错,似乎是不在状 ...
vue-cli3和element做一个简单的登陆页面
1.先用vue-cli3创建一个项目 2.安装element模块全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...

随机推荐

ZOJ3496 Assignment
传送门这题也是真恶心-- 题目大意是俩公司要运货,每条路有容量上限.然后B公司手里有p个--(技能点?)如果在一条路上放了x个技能点,这条路经过了y个货物,那么B公司就会收x*y的钱.现在要求的是, ...
Linux服务：使用Supervisor管理进程
一.简介由于基本每个公司都会用到supervisor这个进程管理工具,这里简单阐述一下. Supervisor (http://supervisord.org) 是一个用Python写Linux下的 ...
centos7 安装 python3.5
centos7 安装 python3.5 一. python虚拟环境virtualenv VirtualEnv用于在一台机器上创建多个独立的python运行环境,VirtualEnvWrapper为前 ...
js 拦截窗体关闭事件
<script type="text/javascript"> <!-- window.onbeforeunload = onbeforeun ...
GitHub---github入门
setup git --- create a repository-----fork a repository -- a pull request (be social)
java读取文件：二进制文件
FileWriter只能接受字符串形式的参数,也就是说只能把内容存到文本文件.相对于文本文件,采用二进制格式的文件存储更省空间 InputStream用于按字节从输入流读取数据.其中的int read ...
intellj idea 使用
1. 导入包快捷 Alt + Enter 2. 查看方法注释,点击进入源码即可,若想和eclipse一样鼠标停留即可出现注释提示,开启方法为: Preferences->Editor->G ...
Coding WebIDE 开放支持第三方 Git 仓库
为了给开发者提供更多便捷的开发方式,Coding.net 现正式宣布 WebIDE 开放啦 ! 用户可以自由选择各大代码托管平台,推送代码到其它家代码仓库啦,同时新版的 WebIDE 还有如下特性: ...
利用python数据分析panda学习笔记之DataFrame
2 DataFrame a:通过传入一个等长的列表构成DataFrame 自动加上索引 data={'state':['ohio','ohio','ohio','Nevada','Nevada'], ...
Identity Server 4 原理和实战（完结）_建立Angular 客户端
https://material.angular.io/ 第一部是安装angular cli --prefix=ac:前缀 --routing:默认使用路由 style=scss:样式使用scss - ...

一个简单的注册页面,基于JS

一个简单的注册页面,基于JS的更多相关文章

随机推荐

热门专题