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一个简单的注册页面实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JavaScript 完成注册页面表单校验的实例
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验 <!DOC
-
js简单实现用户注册信息的校验代码
register.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt
-
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[na
-
AJAX实现简单的注册页面异步请求实例代码
AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. (4)传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var boolu
-
node.js实现简单登录注册功能
本文实例为大家分享了node.js实现简单登录注册的具体代码,供大家参考,具体内容如下 1.首先需要一个sever模块用于引入路由,引入连接数据库的模块,监听服务器2.要有model层,里面写数据库连接模块和数据库的各种model(表),并导出model对象3.工具类utils,里面存放一些功能的模块,并且封装后导出 ,例如发送验证码的功能4.写路由,需要对数据库操作就使用导出的model对象,需要功能模块就使用导出的功能对象随后返回这个路由,在sever里引入5.生成api文档 sever模块
-
初探js和简单隐藏效果的实例
js:在页面中用户操作页面时发生的效果都是Js功劳.操作有点击,移入,和移出等... 例1:通过display隐藏盒子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <style> *{ margin:0px; padding:0px; } .li{ list-style:none; } #div1{ widt
-
js最简单的双向绑定实例讲解
把代码复制放到页面里面运行看一下效果就好了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="myinput" > <sc
-
js定时器+简单的动画效果实例
1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc
-
vue.js的简单自动求和计算实例
一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面 我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>
-
使用MongoDB和JSP实现一个简单的购物车系统实例
本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JSP编程技术实现一个简单的购物车程序,具体要求如下. (1)用JSP编写一个登录页面,登录信息中有用户名和密码,分别用两个按钮来提交和重置登录信息. (2)编写一个JSP程序来获取用户提交的登录信息并查询数据库,如果用户名为本小组成员的名字且密码为对应的学号时,采用JSP内置对象的方法跳转到订购页面(显示店中商品的种类和单价等目录信息):否则采用JSP动作提示用户重新登录(注:此页面上要包含前面的登录界面). (3
-
一个简单的JavaScript Map实例(分享)
用js写了一个Map,带遍历功能,请大家点评下啦. //map.js Array.prototype.remove = function(s) { for (var i = 0; i < this.length; i++) { if (s == this[i]) this.splice(i, 1); } } /** * Simple Map * * * var m = new Map(); * m.put('key','value'); * ... * var s = ""; *
-
java实现一个简单的Web服务器实例解析
Web服务器也称为超文本传输协议服务器,使用http与其客户端进行通信,基于java的web服务器会使用两个重要的类, java.net.Socket类和java.net.ServerSocket类,并基于发送http消息进行通信. 这个简单的Web服务器会有以下三个类: *HttpServer *Request *Response 应用程序的入口在HttpServer类中,main()方法创建一个HttpServer实例,然后调用其await()方法,顾名思义,await()方法会在指定端口上