jQuery完成表单验证的实例代码(纯代码)


Posted in jQuery onSeptember 30, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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完成表单验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php截取中文字符串函数实例
2015/02/23 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
详解python算法之冒泡排序
2019/03/05 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
python时间time模块处理大全
2020/10/25 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
运动会解说词50字
2014/01/18 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
《窃读记》教学反思
2016/02/18 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书