jQuery完成表单验证的实例代码(纯代码)
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!doctype html>
<head>
<meta charset=utf-8" />
<title>表单验证</title>
<link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="jquery/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("form :input.required").each(function() {
var $required=$("<strong class=high>*</strong>");
$(this).parent().append($required);
});
$("form :input").blur(function() {
var $parent=$(this).parent();
$parent.find(".formtips").remove();
if($(this).is("#username")){
if(this.value==""||this.value.length<6){
var errorMsg='请输入至少六位的用户名';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg='输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
return false;
}
}
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>');
}
}
});
$("#send").click(function() {
$("form .required:input").trigger('blur');
var numError=$("form .onError").length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱，请查收。");
});
});
</script>
</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>
</body>
</html>
总结
以上所述是小编给大家介绍的jQuery完成表单验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍JavaScript表单验证完美代码，包括了JavaScript表单验证完美代码的使用技巧和注意事项，需要的朋友参考一下 用原生JS写一个简单的表单验证 首先，是html部分 接着，为其加上CSS样式 最后是JS部分 好了，打开浏览器测试一下吧 填写数据，可以！ 以上所述是小编给大家介绍的JavaScript表单验证完美代码，希望对大家有所帮助，如果大家有任何疑问请给我留言
-
本文向大家介绍jQuery Validate表单验证插件实现代码，包括了jQuery Validate表单验证插件实现代码的使用技巧和注意事项，需要的朋友参考一下 1 表单验证的准备工作 在开启长篇大论之前，首先将表单验证的效果展示给大家。 1.点击表单项，显示帮助提示 2.鼠标离开表单项时，开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮
-
本文向大家介绍jQuery Validate设置onkeyup验证的实例代码，包括了jQuery Validate设置onkeyup验证的实例代码的使用技巧和注意事项，需要的朋友参考一下 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。下面给大家分享一段jquery validate 设置onkeyup验证
-
本文向大家介绍JavaScript 随机验证码的生成实例代码，包括了JavaScript 随机验证码的生成实例代码的使用技巧和注意事项，需要的朋友参考一下 随机验证码的生成 1： 主体部分 接下来时如何放入到验证框里面了 <input type="text" id="checkCode" class="unchanged" style="width: 80px" readonly/> 接
-
本文向大家介绍Java生成验证码功能实例代码，包括了Java生成验证码功能实例代码的使用技巧和注意事项，需要的朋友参考一下 页面上输入验证码是比较常见的一个功能,实现起来也很简单.给大家写一个简单的生成验证码的示例程序,需要的朋友可以借鉴一下. 闲话少续,直接上代码.代码中的注释很详细. 上面这段代码就能生成一个验证码,略微修改就能生成各种各样的形式,main方法可以测试. 下面为大家写一下如何返
-
本文向大家介绍java生成图片验证码实例代码，包括了java生成图片验证码实例代码的使用技巧和注意事项，需要的朋友参考一下 关于java图片验证码的文章最近更新了不少，帮助大家掌握java验证码的生成技术，下文为大家分享了java生成图片验证码最简单的方法，供大家参考。 现在各行业在定制系统时都会考虑到机器注册，现在最有效的方式就是输入验证。现在的验证方式有很多种： 一、问题验证，其实也是图片验证