一个简单的注册页面,基于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="提交"/>
<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 ...
随机推荐
- BZOJ_3123_[Sdoi2013]森林_主席树+启发式合并
BZOJ_3123_[Sdoi2013]森林_主席树+启发式合并 Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20 ...
- smokeping部署安装
smokeping部署安装 部署情况: 服务器IP:192.168.10.18 smokeping部署在/var/www/html/smokeping目录 smokeping部分命令: smokepi ...
- Outlook 开发
转自:http://www.cnblogs.com/madebychina/archive/2011/09/20/madebychina_2.html C#使用如下代码调用Outlook2003发送邮 ...
- js事件触发器fireEvent和dispatchEvent
转自:https://www.cnblogs.com/tiger95/p/6962059.html 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome, ...
- 【222】◀▶ IDL 输入输出函数说明
参考:I/O - General Input/Output Routines —— 基本输入输出函数 01 PRINT/PRINTF 格式化输出. 02 READ/READF 格式化输入. 0 ...
- CF-798B
B. Mike and strings time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- Tomcat之the jre_home environment variable is not defined correctly this environment variable is need
参考https://blog.csdn.net/qq_30507287/article/details/53981851 今天在服务器的tomcat上部署.war文件,双击startup闪退,然后在t ...
- jquery的on()绑定无效的方式
on前面的元素也必须在页面加载的时候就存在于dom里面.动态的元素或者样式等,可以放在on的第二个参数里面 jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态 ...
- PHP实用小程序（一）
<? //设置路径(默认当前php文件所在路径) $basedir = "d:/inetpub/wwwroot"; $textrows = "20"; $ ...
- 手把手教你使用ueditor
ueditor的强大功能就不再一一叙述了,我们的目的就是通过使用php与html实现下面的效果 话不多说,上干货 前言:文件都是基于tp5的 1.引入富文本编辑器 将 ueditor 下的文件引入 1 ...