实现效果:
用户进行注册时能够对其输入的信息进行简单验证,逐行验证,若输入信息不符合规范,则在旁边显示错误提示。效果图图如下:(由于没有进行修饰,界面异常丑陋,但主要功能没问题)
实现思路:
1、使用form表单标签用于为用户输入创建 HTML 表单,使用input元素获取用户填写的数据。
2、制定相关的正则表达式,用DOM对象取出用户输入的相关数据与正则表达式进行比较验证。
3、最后用onsubmit和reset事件进行数据提交和重置。
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript">
// 调用方法
window.onload=function(){
document.getElementsByName("username")[0].onkeyup=checkUsername;
document.getElementsByName("password")[0].onkeyup=checkPassword;
document.getElementsByName("repassword")[0].onkeyup=checkRepassword;
document.getElementsByName("email")[0].onkeyup=checkEmail;
document.getElementsByName("phone")[0].onkeyup=checkPhone;
document.getElementsByName("button1")[0].onsubmit=check;
}
// 校验用户名
function checkUsername(){
var reg=/^\w{6,18}$/;
var username=document.getElementsByName("username")[0].value;
var span=document.getElementsByName("username")[0].nextSibling;
if(reg.test(username)){
span.innerHTML="<img src='image/smallsuccess.gif' />";
return true;
}else{
span.innerHTML="<img src='image/smallfail.gif' />";
return false;
}
}
// 校验密码
function checkPassword(){
var reg1=/.{6,12}/;
var reg2=/[A-Z]+/;
var reg3=/[a-z]+/;
var reg4=/[0-9]+/;
var password=document.getElementsByName("password")[0].value;
var span=document.getElementsByName("password")[0].nextSibling;
var reg=reg1.test(password)&®2.test(password)&®3.test(password)&®4.test(password);
if(reg){
span.innerHTML="<img src='image/smallsuccess.gif' />";
return true;
}else{
span.innerHTML="<img src='image/smallfail.gif' />";
return false;
}
}
// 校验确认密码
function checkRepassword(){
var password=document.getElementsByName("password")[0].value;
var repassword=document.getElementsByName("repassword")[0].value;
var span=document.getElementsByName("repassword")[0].nextSibling;
if(password==repassword){
span.innerHTML="<img src='image/smallsuccess.gif' />";
return true;
}else{
span.innerHTML="<img src='image/smallfail.gif' />";
return false;
}
}
// 校验邮箱
function checkEmail(){
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var email=document.getElementsByName("email")[0].value;
var span=document.getElementsByName("email")[0].nextSibling;
if(reg.test(email)){
span.innerHTML="<img src='image/smallsuccess.gif' />";
return true;
}else{
span.innerHTML="<img src='image/smallfail.gif' />";
return false;
}
}
// 校验电话号码
function checkPhone(){
var reg=/^1[0-9]{10}/;
var phone=document.getElementsByName("phone")[0].value;
var span=document.getElementsByName("phone")[0].nextSibling;
if(reg.test(phone)){
span.innerHTML="<img src='image/smallsuccess.gif' />";
return true;
}else{
span.innerHTML="<img src='image/smallfail.gif' />";
return false;
}
}
function check(){
return checkUsername()&&checkPassword()&&checkRepassword()&&checkEmail()&&checkPhone();
}
</script>
<body>
<form action="#" method="post">
<table>
<tr>
<td>
1、请输入用户名:
<input type="text" name="username" autocomplete="off" placeholder="请输入用户名" required="required"/><span></span>
<p>用户名长度为6-18位,必须为字母或数字或下划线</p>
</td>
</tr>
<tr>
<td>
2、请 输 入 密 码:
<input type="password" name="password" placeholder="请输入密码" required="required"/><span></span>
<p>密码长度为6-12位,至少包含一位大写字母、一位小字母、一位数字</p>
</td>
</tr>
<tr>
<td>
3、请再次输入密码:
<input type="password" name="repassword" placeholder="请再次输入密码" required="required"/><span></span>
</td>
</tr>
<tr>
<td>
4、请选择性别:
<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
</td>
</tr>
<tr>
<td>
5、请输入邮箱:
<input type="email" name="email" placeholder="请输入邮箱"/><span></span>
</td>
</tr>
<tr>
<td>
6、请输入手机号码:
<input type="text" name="phone" placeholder="请输入手机号码"/><span></span>
</td>
</tr>
<tr>
<td>
<input type="submit" name="button1" value="提交"/>
<input type="reset" name="button2" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>