一个简单的注册页面,基于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 1475] 方格取数
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1475 [算法] 首先将方格黑白染色 , 也就是说 , 如果(i + j)为奇数 , ...
- JSON标准格式
标准JSON的合法符号:{(左大括号) }(右大括号) "(双引号) :(冒号) ,(逗号) [(左中括号) ](右中括号) JSON字符串:特殊字符可在字符前面加 \ 或使用 ...
- shell函数（调用、返回值，返回值获取）
Shell函数返回值,常用的两种方式:return,echo 1) return 语句shell函数的返回值,可以和其他语言的返回值一样,通过return语句返回.示例1: [devadmin@swa ...
- 使用 DDMenuController 类的方法（非常好用的抽屉类）
关于使用 DDMenuController 类的方法笔记:参考 DDMenuController 是一款非常好用的抽屉类文件. #pragma mark - 界面配置左右导航条的按钮 //[self ...
- matlab 2017版本修改帮助文档为离线
安装matlab2017a后发现,帮助文档为在线版本,必须关联账号. 经过查询资料,帮助文档默认是使用web, on mathworks.com 可以将帮助文档改为离线版本. 具体修改方法: Pref ...
- 1.8 Hive运行日志配置和查看
一.配置文件 1.重命名配置文件 # 把/opt/modules/hive-0.13.1/conf/hive-log4j.properties.template重命名为hive-log4j.prope ...
- sql语句之正则表达式
select * from employee where name regexp '^jin' select * from employee where name regexp '^jin.*(g|n ...
- Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法
40.路由_Fluro的全局注入和使用方法 路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是Materi ...
- 翻转链表中相邻的k个节点
示例: 输入:1->2->3->4->5 k=2 输出:2->1->4->3->5 k=3输出:3->2->1->4->5 Py ...
- zepto+mui开发中的tap事件重复执行
zepto.js和mui一起使用的时候,因为都有tap事件绑定tab事件后会多次触发还会报错,这时不引用zepto中的touch.js就可以了,只用mui的tap相关事件. $(function () ...