内容
1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;
2.点击表单里的输入框,隐藏提示文字;
3.点击提交和重置按钮时,都需要有相应的提示;
4.在表单提交是,需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。
原理
编写正则表达式确定校验规则
编写校验函数
再用if判断
html
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="https://www.baidu.com" id="userform">
<table>
<tr>
<th>昵称:</th>
<th><input type="text" id="username" name="id" /></th>
<th><span id="error1" style="color: red;"></th>
</tr>
<tr>
<th>姓名:</th>
<th><input type="text" id="username" name="id" /></th>
<th><span id="error1" style="color: red;"></th>
</tr>
<tr>
<th>qq号:</th>
<th><input type="text" id="username" name="id" /></th>
<th><span id="error1" style="color: red;"></th>
</tr>
<tr>
<th>手机号:</th>
<th><input type="text" id="username" name="id" /></th>
<th><span id="error1" style="color: red;"></th>
</tr>
<tr>
<th>邮箱地址:</th>
<th><input type="text" id="email" name="email" /></th>
<th><span id="error3" style="color: red;"></th>
</tr>
<tr>
<th>密码:</th>
<th><input type="password" id="userpwd1" /></th>
</tr>
<tr>
<th>确认密码:</th>
<th><input type="password" id="userpwd2" name="pwd" /></th>
<th><span id="error2" style="color: red;"></th>
</tr>
<tr>
<th><input type="button" value="提交" id="start" /></th>
<th><input type="reset" value="重置" id="reset" /></th>
</tr>
</table>
</form>
</body>
</html>
css
#error1{
font-size: 8px;
}
#error2{
font-size: 8px;
}
#error3{
font-size: 8px;
}
#start{
background-color: #ffffff;
height: 30px;
width: 60px;
border-radius: 25px;
}
#reset{
background-color:#ffffff;
height: 30px;
width: 60px;
border-radius: 25px;
}
table{
position: absolute;
border: 1px;
left:40%;
top: 20%;
}
#userpwd1,#userpwd2{
background-color:#ffffff;
}
js
<script type="text/javascript">
window.onload=function(){
//用户名
var usernameElt=document.getElementById("username");
//错误信息1
var error1=document.getElementById("error1");
usernameElt.onblur=function(){
var username=usernameElt.value;
//清空字符串前后空白
username=username.trim();
var usernameRegExp=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
var ok=usernameRegExp.test(username);
if(username==""){
error1.innerText="昵称不能为空!";
}else if(username.length<6||username.length>12){
error1.innerText="昵称长度应该在0-10之间!";
}else if(!ok){
error1.innerText="昵称必须是字母和数字的组合!";
}else {
error1.innerText="";
}
}
usernameElt.onfocus=function(){
//如果有错误,将用户名清空
if(error1.innerText!=""){
usernameElt.value="";
}
error1.innerText="";
}
//错误信息2
var error2=document.getElementById("error2");
//密码
var userpwd1Elt=document.getElementById("userpwd1");
var userpwd2Elt=document.getElementById("userpwd2");
userpwd2Elt.onblur=function(){
var p1=userpwd1Elt.value;
var p2=userpwd2Elt.value;
if(p2!=p1){
error2.innerText="密码不一致!";
}else{
error2.innerText="";
}
}
userpwd2Elt.onfocus=function(){
if(error2.innerText!=""){
userpwd2Elt.value="";
}
error2.innerText="";
}
//错误信息3
var error3=document.getElementById("error3");
//邮箱
var emailElt=document.getElementById("email");
emailElt.onblur=function(){
var emailRegExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+(-.\w+)*$/;
var ok=emailRegExp.test(emailElt.value);
if(ok){
error3.innerText="";
}else{
error3.innerText="邮箱格式错误!";
}
}
emailElt.onfocus=function(){
//如果有错误,将用户名清空
if(error3.innerText!=""){
emailElt.value="";
}
error3.innerText="";
}
//注册按钮
document.getElementById("start").onclick=function(){
//先触发blur
usernameElt.focus();
username.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
//再判断
if(error1.innerText==""
&&error2.innerText==""
&&error3.innerText==""){
alert("注册成功!");
//获取表单对象,并提交
document.getElementById("userform").submit();
}else{
alert("请输入正确信息!");
}
}
}
</script>
注册表单