jQuery完成表单验证的实例代码(纯代码)
更新时间：2017年09月30日 08:47:34 作者：qq_40447559
这篇文章主要介绍了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完成表单验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
要解决该问题有很多办法，最直接的是把$.get()方法换成$.ajax()，然后配置cache:false即可。我不喜欢$.ajax()繁琐的配置方式，可采取以下最简单方式实现2013-12-12
这篇文章主要介绍了jQuery实现本地预览上传图片功能，为大家推荐了一款图片上传预览插件，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要为大家详细介绍了jQuery实现简单聊天室，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
目前做的这个项目中要用到用户头像功能，领导说最好是做成用户上传一个图片后可以用图像裁剪的方法自己选择头像。2009-05-05
jQuery实现ajax调用WCF服务的方法(附带demo下载)
这篇文章主要介绍了jQuery实现ajax调用WCF服务的方法,以完整实例形式分析了jQuery的ajax前端调用及后台交互调用WCF服务的相关技巧,并附带完整实例共读者下载,需要的朋友可以参考下2015-12-12
jquery 表单下所有元素的隐藏，不用增加额外的div是个不错的方法。2009-07-07
这篇文章主要为大家详细介绍了jquery.form.js异步提交表单的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
如何用jQuery实现ASP.NET GridView折叠伸展效果
我们今天就一个具体的需求进行分析，引出如何用jQuery实现ASP.NET GridView折叠伸展效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-09-09
jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。2015-06-06
今天看到一个jquery插件jquery.fileupload.v.1.5.0，自己试着结合java做了一个ajax的文件上传小应用2009-03-03
最新评论