jquery 简单校验

最新推荐文章于 2024-07-14 03:35:40 发布

fliay

最新推荐文章于 2024-07-14 03:35:40 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/G631233828/article/details/8455862

版权

jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

<style type="text/css">
.high{
color:red;

}
</style>

<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
funct=$(function(){
$("form :input.required").each(function(){
var $required=$("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
$('form :input').blur(function(){
var $parent=$(this).parent();
if($(this).is('#username')){
if(this.value==""||this.value.length<6){
var errorMsg='请输入至少6位的用户名';
$parent.find(".formtips").remove();
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');

}else{
var okMsg='输入正确';
$parent.find(".formtips").remove();
$parent.append('<span class="formtips onSuccess">'+okMsg+'</pan>')
}
}
if($(this).is('#email')){
if(this.value==""){
var errorEmail='请输入正确的邮箱地址';
$parent.find(".formtips").remove();
$parent.append('<span class="formtips onError">'+errorEmail+'</span>');
}else{
var okMsg='输入正确';
$parent.find(".formtips").remove();
$parent.append('<span class="formtips onSuccess">'+okMsg+'</pan>')
}
}

})
$("#send").click(function(){
$('form .required:input').trigger('blur')
var numError=$('form .onError').length;
if(numError){
return false;
}
alert("注册成功")
})
})

</script>

<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required"/>

</div>
<div class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required"/>

</div>
<div class="int">
<label for="personinfo">个人资料：</label>
<input type="text" id="personinfo" class=""/>

</div>
<div class="sub">
<input type="submit" value="提交" id="send" />
</div>

</form>

</body>
</html>