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函数
May 27 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
JS实现拼图游戏
2021/01/29 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python中new方法的详解
2019/01/15 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python django生成迁移文件的实例
2019/08/31 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
简单介绍django提供的加密算法
2019/12/18 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
廉洁校园实施方案
2014/05/25 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
Golang连接并操作MySQL
2022/04/14 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
Python实现对齐打印 format函数的用法
2022/04/28 Python