JS项目

设计如下图所示的页面，各文本框输入信息在失去焦点时验证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求如下：
(1) 用户名是由 4 ~ 16 位字符组成，不能包含数字，不能为空。加载页面时提示相应信息。
(2) 密码是由 4 ~ 10 位字符组成，且不能为空，加载页面时提示相应信息。密码和确认密
码必须一致。
(3) 电子邮箱信息不能为空，且必须包含“@”符号和“.”符号，且“@”符号不能在第 1
位，必须在“.”符号前面。
(4) 手机号不能为空，必须是 11 位数字，且由 1 开头。
(5) 出生日期不能为空，格式为 yyyy-mm-dd，年份范围在 1900~当前年，月份范围在 1~12，日范围在 1~31 之间。
(6) 全部信息均满足条件后点击注册按钮，提示注册成功。
提示：在文本框内显示默认文字使用 placeholder 属性。

代码、效果图附下：（直接复制就能用）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单验证</title><script type="text/javascript">String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g, "");}function checkName(username) {username = username.trim();var ok = false;var nameError = document.getElementById("nameError");if (username == "") {nameError.innerHTML = "<font color='red'>用户名不能为空 </font>";ok = false;} else if (!isNaN(username)) {nameError.innerHTML = "<font color='red'>用户名不能包含数字</font>";ok = false;} else if (username.length < 4 || username.length > 16) {nameError.innerHTML = "<font color='red'>请输入4~16位用户名</font>";ok = false;} else {nameError.innerHTML = " ";ok = true;}return ok;}function clearNameError() {var nameError = document.getElementById("nameError");nameError.innerHTML = "";}function checkUserpswd(userpswd) {var pswdError = document.getElementById("pswdError");var ok = false;if (userpswd == "") {pswdError.innerHTML = "<font color='red'>密码不能为空 </font>";ok = false;} else if (userpswd.length < 4 || userpswd.length > 10) {pswdError.innerHTML = "<font color='red'>密码长度必须在4-10之间</font>";ok = false;} else {pswdError.innerHTML = "";ok = true;}return ok;}function clearPswdError() {var pswdError = document.getElementById("pswdError");pswdError.innerHTML = "";}function isSame() {var userpswd = document.getElementById("userpswd").value;var confirmpswd = document.getElementById("confirmpswd").value;var confirmpswdError = document.getElementById("confirmpswdError");var ok = false;if (userpswd != confirmpswd) {confirmpswdError.innerHTML = "<font color='red'>密码不一致</font>";ok = false;} else {confirmpswdError.innerHTML = "";ok = true;}return ok;}function clearSameError() {var confirmpswdError = document.getElementById("confirmpswdError");confirmpswdError.innerHTML = '';}function checkEmail(useremail){useremail = useremail.trim();var ok = false;var emailError = document.getElementById("emailError");var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;if (useremail == "") {emailError.innerHTML = "<font color='red'>电子邮箱信息不能为空</font>";ok = false;} else if (!(reg.test(useremail))) {emailError.innerHTML = "<font color='red'>输入的电子邮箱格式不对，请重新输入</font>";ok = false;} else {emailError.innerHTML = " ";ok = true;}return ok;}function clearEmailError() {var emailError = document.getElementById("emailError");emailError.innerHTML = "";}function checkPhone(userphone){userphone = userphone.trim();var ok = false;var emailError = document.getElementById("phoneError");var reg = /^[1][0-9][0-9]{9}$/;if (userphone == "") {phoneError.innerHTML = "<font color='red'>电话号码不能为空</font>";ok = false;} else if (!(reg.test(userphone))) {phoneError.innerHTML = "<font color='red'>输入的电话号码格式不对，请重新输入</font>";ok = false;} else {phoneError.innerHTML = " ";ok = true;}return ok;}function clearPhoneError() {var phoneError = document.getElementById("phoneError");phoneError.innerHTML = "";}        function checkDate(userbirthdate){userbirthdate = userbirthdate.trim();var ok = false;var dateError = document.getElementById("dateError");var reg = /^((19[0-9]\d{1})|(20((0[0-9])|(2[0-2]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/;var date = new Date(userbirthdate);var today = new Date();if(userbirthdate == ""){dateError.innerHTML = "<font color='red'>出生日期不能为空</font>";ok = false;} else if (!(reg.test(userbirthdate))) {dateError.innerHTML = "<font color='red'>输入的出生日期错误请修改</font>";ok = false;}else if((today.getTime()-date.getTime())<0){dateError.innerHTML = "<font color='red'>你输入的日期超过当前日期，错误请重新输入</font>";ok = false;} else {dateError.innerHTML = " ";ok = true;}return ok;}function clearDateError() {var dateError = document.getElementById("dateError");dateError.innerHTML = "";}function checkAll() {var username = document.getElementById("username").value;var userpswd = document.getElementById("userpswd").value;var useremail = document.getElementById("useremail").value;var userphone = document.getElementById("userphone").value;var userbirthdate = document.getElementById("userbirthdate").value;if (checkName(username) && checkUserpswd(userpswd) && isSame() && checkEmail(useremail) && checkPhone(userphone) && checkDate(userbirthdate)) {document.Myform.submit();alert("注册成功");}}</script>
</head>
<body><h1 style="color: cornflowerblue;" >新用户注册</h2><hr ><form name="Myform"><table><tr><td>用户名：</td><td><input type="text" id="username" name="username" onblur="checkName(this.value)" onfocus="clearNameError()"  placeholder="由4-16位字符组成"/></td><td><span id="nameError"></span></td></tr><tr><td>密码：</td><td><input type="password" id="userpswd" name="userpswd" onblur="checkUserpswd(this.value)" onfocus="clearPswdError()" placeholder="由4-10位字符组成"/></td><td><span id="pswdError"></span></td></tr><tr><td>确认密码：</td><td><input type="password" id="confirmpswd" name="confirmpswd" onblur="isSame();" onfocus="clearSameError()" /></td><td><span id="confirmpswdError"></span></td></tr><td>电子邮箱：</td><td><input type="email" id="useremail" name="useremail" onblur="checkEmail(this.value)" onfocus="clearEmailError()" placeholder="邮箱格式示例：web@126.com"/></td><td><span id="emailError"></span></td><tr></tr><td>手机号码：</td><td><input type="phone" id="userphone" name="userphone" onblur="checkPhone(this.value)" onfocus="clearPhoneError()" placeholder="长度为11位且首字符必须是1"/></td><td><span id="phoneError"></span></td><tr></tr><td>出生日期：</td><td><input type="birthdate" id="userbirthdate" name="userbirthdate" onblur="checkDate(this.value)" onfocus="clearDateError()" placeholder="日期输入格式：yyyy-mm-dd"/></td><td><span id="dateError"></span></td><tr><td><input type="button" value="注册" onclick="checkAll();" /></td></tr></table></form></body>
</html>

效果图如下：

JS项目（验证注册页面信息）相关推荐

JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
SSM项目之注册页面知识点整理
最近完成一个小项目,每次都会编写注册功能的实现.为了方便以后自己查阅和使用相同技术点的开发人员参考,记录一下注册页面所涉及知识点. 目录 1.图片验证码技术保护web应用 2.使用bootstrapv ...
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
【JS】制作注册页面
使用js制作注册页面,使用正则表达式验证该数据是否符合要求 <!DOCTYPE html> <html><head><meta charset="U ...
java验证注册页面_Java使用正则表达式对注册页面进行验证功能实现
本文给大家介绍java使用正则表达式对注册页面进行验证的代码,代码如下所示: package regex; import java.util.Scanner; import java.util.reg ...
【HTML+CSS+JS】登录注册页面大合集
前言学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便萌生了用人脸来进行注册和登录的想法,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进 ...
怎么用php配合js编写动态页面_JavaScript_JavaScript教程:用JS脚本实现Web页面信息交互范例，要实现动态交互，必须掌握有 - phpStudy...
要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识. 三.范例下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击"调用动态按钮文档" ...
django和mysql写注册_Django电商项目---完成注册页面和用户登录
完成基本的创建项目.用户注册.登录.注销功能创建Django项目,创建df_user的App 创建静态文件夹static(跟manage.py保持在同一级别下) 复制静态文件(css + images ...
带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验
今日内容使用JQuery完成页面定时弹出广告使用JQuery完成表格的隔行换色使用JQuery完成复选框的全选效果使用JQuery完成省市联动效果使用JQuery完成下列列表左右选择使用J ...

JS项目（验证注册页面信息）

JS项目

设计如下图所示的页面，各文本框输入信息在失去焦点时验证，如果输入有误，在文本框后面提示错误信息，各文本框输入信息的具体要求如下：

代码、效果图附下：（直接复制就能用）

效果图如下：

JS项目（验证注册页面信息）相关推荐

最新文章

热门文章