首页 / JQUERY / jQuery表单验证简单示例
jQuery表单验证简单示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery表单验证简单示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2464字,纯文字阅读大概需要4分钟。
内容图文
![jQuery表单验证简单示例](/upload/InfoBanner/zyjiaocheng/349/ec86f6c98db9437e830efa254dd42894.jpg)
本文实例讲述了jQuery表单验证简单用法。分享给大家供大家参考,具体如下:
这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面
jquery 表单验证
就是验证表单里面所信息都为必填
//注册页面验证机制 $("#username").focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码 $("#username_error").removeClass("error").html(" "); $("#username_succeed").removeClass("succeed"); $(this).removeClass("highlight2") $("#username_error").addClass("focus").html("学号必须由11位数字组成。如:104084002xx"); $(this).addClass("highlight1"); }); $("#username").blur(function(){ //用blur()表单,当光标离开输入框的时候执行下面的代码 $value = $.trim( $(this).val() ); //去掉输入数据左右的空格 if($value.length == 0 ) { $("#username_error").addClass("error").html("学号不能为空"); $(this).addClass("highlight2"); return false; } else { $("#username_error").removeClass("focus").html(" "); $(this).removeClass("highlight1"); if($.isNumeric($value)) { if($value.length == 11) { $("#username_succeed").addClass("succeed"); $("#username_error").removeClass("error").html(" "); $(this).removeClass("highlight2") return true; } $("#username_error").addClass("error").html("学号必须为11位"); $(this).addClass("highlight2"); return false; } $("#username_error").addClass("error").html("学号必须为数字"); $(this).addClass("highlight2"); return false; } });
上面就是JQUERY部分代码,就进行了,对学号的现在和效果显示。下面是用到的样式的代码清单
.highlight1{ border:1px solid #EFA100; outline:2px solid #FFDC97; } .highlight2{ border:1px solid #f00; outline:1px solid #FFC1C1; color:#f00; } .focus{ color:#999; line-height:22px; text-align:center; } .succeed{ background:url(images/pwdstrength.gif) no-repeat -105px 0; }
也列举出部分HTML代码
<div> <span><b>*</b>学号:</span> <input type="text" id="username" name="userid" /> <label id="username_succeed"></label> //如果符合要求这里就添加SUCCEED样式。否则隐藏 <span class="clr"></span> //清除浮动 <div id="username_error"></div> //如果不符合要求就现在focus样式。 </div>
这样就完成了对输入学号字段的验证。效果友好。
其他的输入框的验证都是依样画葫芦。没什么难点了。
原理:
就是添加CLASS和移除CLASS。达到效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的jQuery表单验证简单示例全部内容,希望文章能够帮你解决jQuery表单验证简单示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。