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

最新推荐文章于 2022-08-15 19:49:49 发布
最新推荐文章于 2022-08-15 19:49:49 发布
阅读量605 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dqn811/article/details/77841180
版权 
<!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" οnsubmit="return checkForm()">
                <dl class="dl1">
                    <dt>用户姓名 : </dt>
                    <dd><input type="text" name="uname" οnblur="checkname()" /></dd>
                    <dd id="errorname"></dd>
                </dl>
                <dl class="dl1">
                    <dt>用户密码 : </dt>
                    <dd><input type="password" name="upass" οnblur="checkpass()"/></dd>
                    <dd id="errorpwd"></dd>
                </dl>
                <dl class="dl1">
                    <dt>再次输入密码 : </dt>
                    <dd><input type="password" name="upass2" οnblur="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" οnchange="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>



运行截图:

dqn811
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的web+JS的注册登录页面
10-02
这是一个简单的web登录注册页面，含有基础的JS登录验证语法，入门级页面源码文件，需要的，自行下载了解。
基于javaweb实现的简单登录注册页面
最新发布
01-07
该项目是一个基于JavaWeb技术实现的简单登录注册系统，旨在提供一个基础框架，用户可以在此基础上进行自定义开发。以下是对项目各个方面的详细说明： 1. **JavaWeb基础**：JavaWeb是Java技术在Web开发中的应用，它...
一个简单的注册页面的js
weixin_30905981的博客
07-31 833
前端调用onblur="函数名（this）" /** 用户名*/ function onblurusername(a){var b=a.value;if(!b.match('[a-zA-Z]{7}')){$("#namespan").html("用户名应为字母且位数应大于6位");}else{$("#namespan").html("");}}/** 关...
HTML(2) 实现一个简单的注册页面
郑清
09-14 1万+
效果图如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>注册页面</title> <style> table{ ...
JavaScript小练习：制作一个简易的注册页面
qq_47863425的博客
04-26 5541
要求：用户可以填写用户名，密码，性别，爱好，籍贯，个人描述。其中用户名，密码，性别，籍贯为必填项，在必填项之前有红色的*号标注，若必填项没有填写，则点击注册按钮后，必填项后面会显示红色的提示文本。 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten...
node.js实现登录注册页面
10-20
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript，这使得前后端开发更加统一。以下是对实现登录注册页面的关键知识点的详细解释： 1. **Node.js基础**： - Node.js的...
基于JS实现操作成功之后自动跳转页面
10-14
首先，我们来看一个简单的例子，这个例子展示了如何在用户打开页面5秒后自动跳转到百度主页，或者用户点击“返回”按钮时返回上一页面： ```html <!DOCTYPE html> 浏览器对象 ; charset=gkb"/> <!-- 先编写...
JSCS_form:一个简单的注册表格
04-28
总结，JSCS_form是一个基于JavaScript的简单注册表格应用，涉及到前端开发的基础知识，如DOM操作、表单验证、AJAX请求以及现代JavaScript语法。通过理解和学习这些知识点，你将能够更好地理解并维护类似项目。
登录注册的页面html模板源码
12-04
在登录注册页面，JavaScript常用于验证用户输入，比如检查邮箱格式、确认密码是否匹配，甚至可以实现简单的前端登录功能，通过AJAX异步提交数据，避免页面刷新。此外，还可以用JavaScript来显示或隐藏表单部分，以及...
js实现简单的注册验证
10-19
使用js实现简单的对用户名、密码的注册验证。password与repassword的验证。
JavaScript注册页面
12-09
提供注册页面给大家认识，了解相关代码，相互交流，相互学习，共同进步。
一个简单的带有javascript验证的注册页面
02-09
一个简单的带有javascript验证的注册页面
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
js注册界面
11-23
一个简单的注册界面验证，如果输入正确会返回输入的用户名和密码，如果没有填写会提示填写完整。
运用js做一个简单的注册验证窗口
TeaLeafEgg的博客
09-06 424
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;!--引入boostrap样式文件--&gt; &lt;link rel="stylesheet" type=
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
HTML+JS编写一个简易的注册页面，并对输入进行规范检测
qq_50898676的博客
09-15 9467
经过两天对JavaScript的学习，基于对第一次超简易的HTML编写的注册页面，进行改编完善，重新写了一个界面，学习到新的知识很快乐，便分享两个注册页面的 源代码给初学者参考学习 （一）HTML的登入界面： 源代码：（利用表格进行放置） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> ...
html+css+javaScript实现一个简单的注册界面
小小城序员的博客
08-07 9295
html+css+js实现一个简单的注册界面 自学html，css，js也有一小段时间了，尝试着做点东西来巩固一下，就决定实现这个简单的注册界面。实现的注册界面很普通，没有加上华丽的装饰，但能实现基本的注册界面应有的效果。 注册界面的效果： 1.未输入或输入框为空时会有默认值提示输入信息 2.输入框获取焦点时时会清空默认值 3.输入不符合要求时会有警告提示 4.全部信息未输入正确时无法注册提交 5.地址选择时，选择省份后会有该省份相应的市提供选择 注册界面： 附上代码：（代码里有详细的注释） logini
用uniapp写一个注册页面
09-11
### 回答1： 首先，你需要在uniapp中新建一个页面，然后在页面中添加注册表单，包括用户名、密码、邮箱等必要信息。接着，你需要为表单添加验证功能，以确保用户输入正确有效的信息。最后，你需要将用户输入的信息发送到服务器，以便完成注册。 ### 回答2： UniApp 是一个基于 Vue.js 的跨平台开发框架，可以用于同时开发iOS、Android和Web等多个平台的应用。以下是用UniApp写一个简单的注册页面的步骤： 1. 创建 UniApp 项目。使用HBuilderX等IDE创建一个新的UniApp项目。 2. 在项目的pages目录下创建注册页面。在pages目录下创建一个新的目录，例如register，然后在该目录下创建一个register.vue文件。 3. 在register.vue文件中编写注册页面的代码。可以使用Vue.js的语法来构建页面的结构和样式，也可以使用uni-ui组件库提供的组件来快速构建页面。 例如：可以使用uni-ui的输入框组件来实现用户输入用户名和密码的功能。 ```html <template> <view> <uni-input v-model="username" placeholder="请输入用户名"></uni-input> <uni-input v-model="password" type="password" placeholder="请输入密码"></uni-input> <uni-button @tap="register">注册</uni-button> </view> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { register() { // 处理注册逻辑，可以发送请求到后端进行用户注册 } } }; </script> <style> // 可以添加样式来美化页面 </style> ``` 4. 在需要显示注册页面的地方引入注册页面。在App.vue的<template>中或者其他页面中使用`<navigator url="../register/register"></navigator>`来跳转到注册页面。 以上是一个简单的用UniApp写注册页面的步骤，可以根据需要自行修改和扩展。同时，UniApp还提供了丰富的API和插件，可以实现更多功能和效果。 ### 回答3： 使用uniapp编写一个注册页面可以通过以下步骤完成： 1. 创建一个新的uniapp项目，可以使用HBuilderX等IDE或者通过命令行工具创建。 2. 在项目的pages文件夹下创建一个新的注册页面，比如`register.vue`。 3. 在`register.vue`中编写注册页面的结构，可以使用常见的表单元素如输入框、密码框、复选框等，同时可以添加注册按钮。 4. 在`register.vue`中编写注册页面的样式，可以使用CSS或者uniapp提供的样式库如uView等。 5. 在`register.vue`中编写注册页面的逻辑，包括用户信息的校验、表单提交、注册成功或失败的提示等。可以使用uniapp提供的API如`uni.showToast`等来实现窗口提示。 6. 在需要跳转到注册页面的地方，添加点击事件，通过`uni.navigateTo`方法跳转到注册页面。 例子： ```vue <template> <view> <input type="text" v-model="username" placeholder="请输入用户名" /> <input type="password" v-model="password" placeholder="请输入密码" /> <button @click="register">注册</button> </view> </template> <script> export default { data() { return { username: '', // 用户名 password: '', // 密码 } }, methods: { register() { // 进行表单校验逻辑，比如判断用户名密码是否为空 if (this.username === '' || this.password === '') { uni.showToast({ title: '用户名和密码不能为空', icon: 'none', }) return } // 进行注册逻辑，比如发送注册请求 // ... // 注册成功或失败的提示逻辑 // ... } } } </script> <style> /* 样式定义 */ </style> ``` 以上是一个简单的注册页面的例子，根据具体要求可以添加更多的功能或样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值