【code】表单验证

最新推荐文章于 2024-05-23 22:33:59 发布

原创最新推荐文章于 2024-05-23 22:33:59 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #javascript #表单

jQuery 专栏收录该内容

11 篇文章

订阅专栏

这篇博客演示了如何使用jQuery实现表单验证。通过添加特殊类`required`标记必填字段，并在文本框失去焦点时进行验证。对于用户名，验证长度至少为6位；对于邮箱，验证其格式是否正确。验证失败时显示错误提示，成功则显示成功信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<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" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
</form>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
//必填项后加*标注
$(":input.required").each(function(){
var $required=$("<strong class='high'>*</strong>");
$(this).parent().append($required);
})
//文本框失去焦点后
$(":input").blur(function(){
var $parent=$(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if ($(this).is("#username")) {
if (this.value==""||this.value.length<6) {
var errorMsg="请输入至少6位的用户名";
$parent.append("<span class='formtips onError'>"+errorMsg+"</span>");

}else{
var okMsg="输入正确";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
};
//验证邮箱
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
})

})

</script>
</body>
</html>