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 QueryString解析类代码
Jan 17 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 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
Session保存到数据库的php类分享
2011/10/24 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python和Bash结合在一起的方法
2020/11/13 Python
利用python爬取有道词典的方法
2020/12/08 Python
HTML5标签大全
2016/11/23 HTML / CSS
企业承诺书怎么写
2014/05/24 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
个人自荐书怎么写
2015/03/26 职场文书
推荐信范文大全
2015/03/27 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
app场景下uniapp的扫码记录
2022/07/23 Java/Android