基于JavaScript,实现简单的注册表单

更新时间:2023-07-09 23:48:42 阅读: 评论:0

基于JavaScript,实现简单的注册表单
表单要求:
1、⽤户名不能为空,否则提⽰错误
2、⽤户名长度在6-12之间,否则提⽰错误
3、⽤户名只能为字母或数字(正则表达式),否则提⽰错误
4、有密码验证⽂本框,要求必须和密码⽂本框内容⼀致,否则提⽰错误
5、邮箱必须有⼀定格式(正则表达式),否则提⽰错误
6、以上条件全部达成,⽅可提交表单,否则不能提交
<html>
<head>
<meta chart="utf-8">
<title></title>
<!--这⾥的CSS可以忽略-->
<style>
英语资料#error1{
font-size: 8px;
}
#error2{
font-size: 8px;
}
#error3{
font-size: 8px;
}
#start{
background-color: aquamarine;
height: 30px;
width: 60px;
border-radius: 25px;
}
#ret{
background-color: aquamarine;
height: 30px;
在线学法语width: 60px;
border-radius: 25px;
}
table{
position: absolute;
border: 1px;
left:40%;
top: 20%;
}
#urpwd1,#urpwd2{
background-color: darkagreen;
}
</style>
</head>
<body>
<script type="text/javascript">
//⽤户名
var ElementById("urname");
//错误信息1
var ElementById("error1");
var urname=urnameElt.value;
/
/清空字符串前后空⽩
im();
var urnameRegExp=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
var st(urname);
if(urname==""){
globalizederror1.innerText="⽤户名不能为空!";
}el if(urname.length<6||urname.length>12){
error1.innerText="⽤户名长度应该在6-12之间!";
}el if(!ok){
error1.innerText="⽤户名必须是字母和数字的组合!";
}el{
error1.innerText="";
}
}
//如果有错误,将⽤户名清空
//如果有错误,将⽤户名清空
if(error1.innerText!=""){
urnameElt.value="";
}
error1.innerText="";
}
/
/错误信息2
var ElementById("error2");
//密码
var ElementById("urpwd1");
var ElementById("urpwd2");
var p1=urpwd1Elt.value;
var p2=urpwd2Elt.value;
if(p2!=p1){
error2.innerText="密码不⼀致!";
}el{
error2.innerText="";
}
}
if(error2.innerText!=""){
urpwd2Elt.value="";
}
error2.innerText="";
}
//错误信息3
var ElementById("error3");
/
/邮箱
var ElementById("email");
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+(-.\w+)*$/;
波士顿学院var st(emailElt.value);
if(ok){
error3.innerText="";
}el{
error3.innerText="邮箱格式错误!";
}
}
一对一英语口语培训
//如果有错误,将⽤户名清空
if(error3.innerText!=""){
emailElt.value="";
}
error3.innerText="";
}
//注册按钮
urnameElt.focus();
urname.blur();
urpwd2Elt.focus();
urpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//再判断
if(error1.innerText==""
&&error2.innerText==""
&&error3.innerText==""){
alert("注册成功!");
//获取表单对象,并提交
}el{英语qq名
alert("请输⼊正确信息!");
}
}
}
</script>
<form action=""id="urform">
<table>
<tr>
<th>⽤户名:</th>
<th><input type="text"id="urname"name="id"/></th>
<th><span id="error1" ></th>
<th><span id="error1" ></th>
</tr>
医学生考研网<tr>area 11
<th>密码:</th>
<th><input type="password"id="urpwd1"/></th>
</tr>
<tr>
<th>重复密码:</th>
<th><input type="password"id="urpwd2"name="pwd"/></th> <th><span id="error2" ></th>
</tr>
<tr>
<th>邮箱地址:</th>
<th><input type="text"id="email"name="email"/></th>
<th><span id="error3" ></th>
</tr>
<tr>
孩子学习方法<th><input type="button"value="注册"id="start"/></th>
<th><input type="ret"value="重置"id="ret"/></th>
</tr>
</table>兄弟英语
</form>
</body>
</html>

本文发布于:2023-07-09 23:48:42,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/1088168.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:户名   表单   提交   密码   字母   错误   不能   清空
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图