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 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
JQuery实现图片轮播效果
May 08 jQuery
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
bootstrap Table实现合并相同行
Jul 19 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
小学教师师德反思
2014/02/03 职场文书
法学函授自我鉴定
2014/02/06 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
优秀员工演讲稿
2014/05/19 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
家属联谊会致辞
2015/07/31 职场文书
小学毕业教师寄语
2019/06/21 职场文书