JS一个简单的注册页面实例
时间:2019-04-01
本文章向大家介绍JS一个简单的注册页面实例,主要包括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一个简单的注册页面实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- ASP.NET MVC的Razor引擎:View编译原理
- ASP.NET Core中的依赖注入(4): 构造函数的选择与服务生命周期管理
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
- 自动驾驶车辆在2017年的七大光辉历史时刻
- 简单的实现Javascript的MVC
- 谷歌再出黑科技!人工智能模拟的人声和真人几乎难以分辨
- 【Scikit-Learn 中文文档】高斯混合模型 - 无监督学习 - 用户指南 | ApacheCN
- “E+单拼”组合域名eqi.com小六位结拍
- ASP.NET Core中的依赖注入(3): 服务的注册与提供
- 【Scikit-Learn 中文文档】使用 scikit-learn 介绍机器学习 | ApacheCN
- 哈萨比斯:2018年AI最大突破在生物或化学领域
- ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【总体设计 】
- ASP.NET MVC的View是如何被呈现出来的?[设计篇]
- Python大牛告诉你一行代码能干什么?神奇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【译】9个强大的JavaScript技巧
- 【译】算法的记录
- 运行时类型识别
- 外观模式-分析和C++实现
- CSS八种让人眼前一亮的HOVER效果
- 懒加载图片以获取最佳性能的最佳方案
- Egg.js 试水 - 天气预报
- Egg.js试水 - 文章增删改查【前后端分离】
- Flutter基础widgets教程-Offstage篇
- 一份礼物.apk - o泡果奶-的逆向分析
- 代码审计-.NET下的序列化与反序列化(BinaryFormatter)
- 02.视频播放器整体结构
- Spring中@Component和@Bean
- HTTP对接方式
- 使用ShardingSphere 过程中遇到的关于spring boot 版本的问题