表单验证

来源：互联网发布：淘宝买全民晒单编辑：程序博客网时间：2024/06/06 05:55

<!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>

阅读全文

0 0