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表格翻页效果实现思路及代码
Aug 23 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python求解任意闭区间的所有素数
2018/06/10 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python 3 判断2个字典相同
2019/08/06 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
机电一体化求职信
2014/03/10 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
安全生产标语大全
2014/10/06 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL