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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
理解javascript回调函数
Dec 28 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
js实现菜单跳转效果
Dec 11 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
总经理职责范文
2013/11/08 职场文书
大学军训自我鉴定
2013/12/15 职场文书
《太阳》教学反思
2014/02/21 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
通知范文怎么写
2015/04/16 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Vue vee-validate插件的简单使用
2021/06/22 Vue.js