您的位置：首页 > Web前端 > JavaScript

JS练习-用户名-密码-邮箱格式验证

2013-05-03 21:40 579 查看

1、register.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>register.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/validateForm.js"></script>
</head>
<body >
<form action="#" method="post" name="myForm">
<table border="1" align="center">
<caption>基于JS的验证</caption>
<tr>
<th>用户名</th>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<th>密码</th>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<th>邮箱</th>
<td><input type="text" name="email"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</body>
</html>

2、validateForm.js

function validateForm(){

var  formElement = document.myForm;
//            依次取出用户名和密码
var username = formElement.username.value;
var password = formElement.password.value;
var email = formElement.email.value;
//            alert("去空格前："+"#"+username+"#"+":"+password+":"+email+"长度："+username.length);
username = trim(username);
password = trim(password);
email = trim(email);
//            alert("去空格后："+username+":"+password+":"+email+"长度："+username.length);
checkUsername(username);
checkPassword(password);
checkEmail(email);
}
//        验证邮箱
function checkEmail(email){
var flag = true;
if(email.length==0){
flag = false;
alert("邮箱不能为空！");
}else if(!/^\w+@\w+(\.\w+)+$/.test(email)){
flag = false;
alert("邮箱格式不对");
}
return flag;
}

//        验证密码
function checkPassword(password){
var flag = true;
var  formElement = document.myForm;
if(password.length == 0){
flag = false;
alert("密码不能为空！");
formElement.password.focus();
}else if(!/^[0-9]{6}$/.test(password)){
flag = false;
alert("密码必须为6位数字！");
}
return flag;
}
//        验证用户名
function checkUsername(username) {
var flag = true;
var  formElement = document.forms[0];
if(username.length == 0){
flag = false;
alert("用户名不能为空！");
formElement.username.focus();
}else if(!/^[a-zA-Z0-9]+$/.test(username)){
flag = false;
alert("用户名必须为英文数字和下划线和美元符号");
}
return flag;
}
//        自定义去空格函数
function trim(s){
s = s.replace(/(^\s*)|(\s*$)/g, "");//去前后空格
//            s = s.replace(/^\s*$/,"");
return s;
}
window.onload = function(){
var formElement = document.myForm;
formElement.onsubmit=validateForm;
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航