jQuery表单验证简单示例


Posted in Javascript onOctober 17, 2016

本文实例讲述了jQuery表单验证简单用法。分享给大家供大家参考,具体如下:

这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面

jQuery表单验证简单示例

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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
div层的移动及性能优化
Nov 16 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jquery移动节点实例
Jan 14 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
jQuery右下角悬浮广告实例
Oct 17 #Javascript
WEB前端实现裁剪上传图片功能
Oct 17 #Javascript
Javascript获取background属性中url的值
Oct 17 #Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 #Javascript
jquery checkbox的相关操作总结
Oct 17 #Javascript
JS动态添加选项案例分析
Oct 17 #Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
You might like
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
如何提高数据访问速度
2016/12/26 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
一个基于flask的web应用诞生(1)
2017/04/11 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
成品库仓管员岗位职责
2014/04/06 职场文书
软件测试专业推荐信
2014/09/18 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
幼师辞职信范文
2015/02/27 职场文书
银行客户经理岗位职责
2015/04/09 职场文书