表单验证

最新推荐文章于 2023-02-21 17:57:33 发布

原创最新推荐文章于 2023-02-21 17:57:33 发布 · 208 阅读

1 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的注册表单验证示例，详细展示了如何验证Email地址、用户昵称及密码等输入项，并通过样式变化反馈验证结果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册表单验证</title>
<style>
.statel{
background-color:#F00
}
.state2{
background-color:#0F0}
</style>
<script type="text/javascript" src="../jQuery/jQuery/jquery-2.1.0.js"></script>
<script>
$(function(){
var ok1=false;
var ok2=false;
var ok3=false;
var ok4=false;
//验证email地址
$("input:eq(0)").focus(function(){
}).blur(function(){
if($(this).val().search("@")==-1){
$(this).next().text('请输入正确的EMAIL格式').addClass("statel");
}else{
$(this).next().text('输入成功').addClass("state2")
ok1=true;
}
})
//验证用户昵称
$("input:eq(1)").focus(function(){
}).blur(function(){
if($(this).val().length>4 &&$(this).val().length<20 && $(this).val()!=''){
$(this).next().text('输入成功').addClass("state2")
ok2=true;
}else{
$(this).next().text('请输入正确的昵称').addClass("statel");

}
})
//验证用户密码
$("input:eq(2)").focus(function(){
}).blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
$(this).next().text('输入成功').addClass("state2")
ok3=true;
}else{
$(this).next().text('请输入正确的密码').addClass("statel");
}
})
//确认用户密码
$("input:eq(3)").focus(function(){
}).blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''&& $(this).val() == $('input:eq(2)').val()){
$(this).next().text('输入成功').addClass("state2")
ok4=true;
}else{
$(this).next().text('请输入正确的密码').addClass("statel");
}
})
$("#send").click(function(){
if(ok1 && ok2 && ok3 && ok4){
$('form').submit();
}else{
return false;
}
})
});
</script>
</head>

<body>
<form action="http://www.baidu.com">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="background-color:#0FF">请填写您的Email地址:</td>
<td><input style="background-color:#0FF" type="text" /><span class="state1"></span></td>
</tr>
<tr>
<td style="background-color:#0FF">设置您在当当网的昵称:</td>
<td><input style="background-color:#0FF" type="text" /><span class="state1"></span></td>
</tr>
<tr>
<td style="background-color:#0FF">设置密码:</td>
<td><input style="background-color:#0FF" type="text" /><span class="state1"></span></td>
</tr>
<tr>
<td style="background-color:#0FF">确认设置的密码:</td>
<td><input style="background-color:#0FF" type="text" /><span class="state1"></span></td>
</tr><tr>
<td><input type="submit" value="注册" id="send"/></td>
</tr>
</table>
</form>
</body>
</html>