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

JavaScript实现简单表单验证-Web笔记（四）

2016-10-26 22:28 591 查看

用javascript实现表单验证

需求：

1.验证邮箱是否符合规则，并且不能为空

2.验证用户名和密码不能为空，并且长度至少6位

3.验证两次输入的密码是否相同

分析：

1.验证非空 /^\s*$/

2.验证邮箱符合规则，正则表达式是：/^(\w)+@(\w)+(\.\w+)$/

3.验证用户名和密码长度至少6位 /^(\w){6,}$/

4.验证两次输入的密码是否相同，直接比较计即可。

<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>

<body>
<script >
function checkForm(){
//1.获取数据
//alert("5555555555555555555555555");
var email=document.getElementById("email");
var username=document.getElementById("username");
var password=document.getElementById("password");
var repassword=document.getElementById("repassword");

//2.验证非空
if(checkNull(email.value)){
//返回true代表email为空
document.getElementById("email_msg").innerHTML="<font color='red'>邮箱不能为空</font>";
return false;
}
if(checkNull(username.value)){
//返回true代表用户名为空
document.getElementById("username_msg").innerHTML="<font color='red'>用户名不能为空</font>";
return false;
}

if(checkNull(password.value)){
document.getElementById("password_msg").innerHTML="<font color='red'>密码不能为空</font>";
return false;
}

if(checkNull(repassword.value)){
document.getElementById("repassword_msg").innerHTML="<font color='red'>密码不能为空</font>";
return false;
}

//3.验证邮箱符合规则
if(!checkEmail(email.value)){
document.getElementById("email_msg").innerHTML="<font color='red'>邮箱地址格式不正确</font>";
return false;
}

//4.验证会员名或密码长度大于6位
if(!checkLength(username.value)){
document.getElementById("username_msg").innerHTML="<font color='red'>用户名长度必须大于6位</font>";
return false;
}
if(!checkLength(password.value)){
document.getElementById("password_msg").innerHTML="<font color='red'>密码长度必须大于6位</font>";
return false;
}
//5.验证两次输入的密码

if(password.value != repassword.value){alert(password.value);
alert(repassword.value);
document.getElementById("repassword_msg").innerHTML="<font color='red'>密码不一致</font>";
return false;
}
}

function checkNull(data){
var reg=/^\s*$/;//0或多个空字符串
return (reg.test(data));
}
function checkEmail(data){
var reg=/^(\w)+@(\w)+(\.\w+)+$/;
return (reg.test(data));
}

function checkLength(data){
var reg=/^\w{6,}$/;
return (reg.test(data));
}

</script>

<form name=a onsubmit="return checkForm()" ><br>
邮箱<input type="text" id="email" ><span id="email_msg"></span><br>
用户名<input type="text" id="username"><span id="username_msg"></span><br>
密码<input type="password" id="password"><span id="password_msg"></span><br>
再次输入密码<input type="password" id="repassword"><span id="repassword_msg"></span><br>
<input type="submit" value="submit" >
</form>

</body>
</html>

有个需要注意的地方：javascript代码中有错误会导致整段代码不执行。在写的过程中if判断的地方少些一个括号导致一直出不来结果，弄了半天才发现（用文本编辑器写，没有不能检查错误，坑）。

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

标签：

相关文章推荐

新的分享

章节导航