Jquery的小案例四、实现表单的验证(用户名和邮箱)
Jquery的小案例4、实现表单的验证(用户名和邮箱)
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery-1.4.2.min.js"></script>//在此处的Jquery文件封装的js文件下载地址：http://download.csdn.net/detail/feilong_12/5210621
<script>
$(function(){
$(":input").each(function(){
var $ss=$("<strong>*</strong>");
$(this).parent().append($ss);
});
$(":input.name").blur(function(){
if($(this).is(".name")){
$(".formtip").remove();
if(this.value==""||this.value.length<6){
var eg="<span class='formtip'>用户名至少是6个字母</span>";
$(this).parent().append(eg);
}else{
var masg="<span class='formtip'>用户名可以使用</span>";
$(this).parent().append(masg);
}
}
})
$(":input.mail").blur(function(){
if($(this).is(".mail")){
$(".emailtip").remove();
var reg=/\w{1,}@\w+\.\w+/;
var $dd=$(".mail").val();
if(!reg.test($dd)){
var errMsg="<span class='emailtip'>邮箱不合法</span>";
$(this).parent().append(errMsg);
}else{
var eee="<span class='emailtip'>您输入的邮箱符合规则</span>";
$(this).parent().append(eee);
}
}
});
})
</script>
</head>
<body>
<div >用户名：<input type="text" class="name"/></div><br/>
<div >密码：<input type="password" class="pass"/></div>
</br>
<div >邮箱：<input type="text" class="mail"/></div>
<br/>
<input type="button" value="注册"/>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery-1.4.2.min.js"></script>//在此处的Jquery文件封装的js文件下载地址：http://download.csdn.net/detail/feilong_12/5210621
<script>
$(function(){
$(":input").each(function(){
var $ss=$("<strong>*</strong>");
$(this).parent().append($ss);
});
$(":input.name").blur(function(){
if($(this).is(".name")){
$(".formtip").remove();
if(this.value==""||this.value.length<6){
var eg="<span class='formtip'>用户名至少是6个字母</span>";
$(this).parent().append(eg);
}else{
var masg="<span class='formtip'>用户名可以使用</span>";
$(this).parent().append(masg);
}
}
})
$(":input.mail").blur(function(){
if($(this).is(".mail")){
$(".emailtip").remove();
var reg=/\w{1,}@\w+\.\w+/;
var $dd=$(".mail").val();
if(!reg.test($dd)){
var errMsg="<span class='emailtip'>邮箱不合法</span>";
$(this).parent().append(errMsg);
}else{
var eee="<span class='emailtip'>您输入的邮箱符合规则</span>";
$(this).parent().append(eee);
}
}
});
})
</script>
</head>
<body>
<div >用户名：<input type="text" class="name"/></div><br/>
<div >密码：<input type="password" class="pass"/></div>
</br>
<div >邮箱：<input type="text" class="mail"/></div>
<br/>
<input type="button" value="注册"/>
</body>
</html>