一个简单的注册页面,基于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 ...

随机推荐

获取当前正在运行的activity
adb shell dumpsys activity activities | findstr "Run"
C#中，当鼠标移动到控件上，动态显示提示内容 ToolTip
[背景]写了个C#的小程序,其中在Settings窗体中有些配置参数,希望在鼠标移动到对应的配置选项上,动态显示相关的说明解释内容. [解决过程]1.原先就已经知道,有些控件,是带ToolTipTex ...
Asset Catalog Help (十)---Specifying a Resizable Area of an Image
Specifying a Resizable Area of an Image Use the Xcode Slicing feature to specify the dimensions of a ...
4.1-4.2 基于HDFS云盘存储系统分析及hadoop发行版本
一.基于HDFS云盘存储系统如:某度网盘优点: *普通的商用机器内存磁盘 *数据的安全性操作: *put get *rm mv *java api *filesystem 核心: *H ...
如何实现Vue已经弃用的$dispatch和$broadcast方法？
对于父子(含跨级)传递数据的通信方式,Vue.js 并没有提供原生的 API 来支持,而是推荐使用大型数据状态管理工具 Vuex,但 Vuex 对于小型项目来说用起来真的很麻烦. 在 Vue.js 1 ...
IntelliJ IDEA 激活
方法1 进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.php 或者 http://idea.la ...
UTF-8和Unicode互转
1.Unicode转UTF-8 void CodeCovertTool::UNICODE_to_UTF8(const CString& unicodeString, std::string&a ...
PTA 4-4 先序输出叶结点【基础题】
//二叉树的叶结点:度为0的结点. void PreorderPrintLeaves( BinTree BT ) { if(BT==NULL) //如果传下来根节点就是空,直接返回: return; ...
Android studio改包名
http://www.cnblogs.com/Kyouhui/p/4632813.html Android Studio,咱们开发安卓的利器,自推出就受到移动开发者的追捧,但一路走来,大家谈到他,充满 ...
Unity3D–Texture图片空间和内存占用分析
Texture图片空间和内存占用分析.由于U3D并没有很好的诠释对于图片的处理方式,所以很多人一直对于图集的大小和内存的占用情况都不了解.在此对于U3D的图片问题做一个实际数据的分析.此前的项目都会存 ...

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

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

随机推荐

热门专题