实用表单验证

最新推荐文章于 2021-06-19 07:57:49 发布

hu_mouse

最新推荐文章于 2021-06-19 07:57:49 发布

阅读量335

点赞数

本文链接：https://blog.csdn.net/hu_mouse/article/details/46931263

版权

<!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>demo</title>
<style>
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
var off=true;
$('.queren').on('click',function(){

if(!$('form span').hasClass('a')){

if(off){
off=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('请选择性别');
$('.pint-text').fadeOut(3000,function(){
off=true;
});
}

}else{

//return false;
//判断姓名
if($('.xm').val() ==''){
if(off){
off=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('请输入姓名');
$('.pint-text').fadeOut(3000,function(){
off=true;
});
}
return false;
}else{
//判断电话号码
if($('.phone').val() == ''){
if(off){
off=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('请输入电话号码');
$('.pint-text').fadeOut(3000,function(){
off=true;
});
}
return false;
}else{
if($('.phone').val().match(/^0?(1[3-9])[0-9]{9}$/)){

}else{
if(off){
off=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('电话格式不正确');
$('.pint-text').fadeOut(3000,function(){
off=true;
});
}
return false;
}
if($('.yzm').val()==''){
if(off){
off=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('验证码不能为空');
$('.pint-text').fadeOut(3000,function(){
off=true;
});
}
}else{
//alert('成功之后')

}
}
}}
})
var off2=true;
$('.tijiao').on('click',function(){
if($('.phone').val()==''){
if(off2){
off2=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('请输入电话号码');
$('.pint-text').fadeOut(3000,function(){
off2=true;
});

}
}else if($('.phone').val().match(/^0?(1[3-9])[0-9]{9}$/)){

}else{
if(off2){
off2=false;
$('.pint-text').fadeIn(1000);
$('.pint-text').html('电话号码格式不正确');
$('.pint-text').fadeOut(3000,function(){
off2=true;
});

}
}
})
});
</script>
</head>
<body>
<div class="pint-text" style="display:none;" ></div>
<form action="">
姓名 <input type="text" name="xm" placeholder="请填写您的姓名" class="xm" />
<span class="b" style="display:block;">1</span><span class="b" style="display:block;">2</span>
电话号码<input type="text" name="phone" placeholder="请填写您的联系方式" class="phone" /><input type="button" class="tijiao">
验证码<input type="text" name="yzm" placeholder="请填写验证码" class="yzm" />
<a href="javascript:;" class="queren" style="width:200px; height:50px; background:red; display:block;">确认</a>
</form>
</body>
</html>