可以用JavaScript的getElementById()来获取某一元素的值，来判断这个值是否满足我们的要求，同时可以弹出一些提示。
（这个方法实验过后，我们可以发现，若是总是在页面上弹框，是非常影响体验的，所以，后面有一个改进版）
eg.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table{
margin: 0 auto;
margin-top: 10%;
}
</style>
<script>
function checkForm(){
var uValue=document.getElementById("user").value;
/*alert(uValue);*//*检验是否获取到了值，之后可以屏蔽掉*/
if(uValue==""){ /*这里注意，不是null*/
//给出错误提示
alert("用户名不能为空");
return false;
}
//校验密码
var pValue=document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空");
return false;
}
//校验确认密码
var rpValue=document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码不一致");
return false;
}
//校验邮箱
var eValue=document.getElementById("email").value;
/*此处用了正则表达式，/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/。调用test()*/
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确");
return false;
}
}
</script>
</head>
<body>
<form action="#" method="get" name="regForm" οnsubmit="return checkForm()"><!--注意此处的return-->
<table border="1px" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">会员注册</td>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" name="user" id="user"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" id="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repassword" id="repassword"/></td>
</tr>
<tr>
<td>email：</td>
<td><input type="text" name="email" id="email"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" name="birthday" id="birthday"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
