jQuery表单验证简单示例

本文实例讲述了jQuery表单验证简单用法。分享给大家供大家参考,具体如下:

这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面

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相关内容感兴趣的读者可查看本站专题:《jQuery表单操作总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

时间: 2016-10-16

jquery 最简单易用的表单验证插件

复制代码 代码如下: /* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [], isBindSubmit = typeof arguments[

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

jQuery表单验证插件formValidator(改进版)

枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT

jquery插件制作 表单验证实现代码

先下页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>&l

jQuery实现用户注册的表单验证示例

复制代码 代码如下: <html> <head> <meta charset="utf-8"/> <script type="text/javascript" src="../script/jquery-1.4.2.min.js"></script> <script> $(function(){ $(":input.required").each(func

jquery validate.js表单验证的基本用法入门

这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

Jquery练习之表单验证实现代码

Jquery练习表单验证 复制代码 代码如下: <body> <form action="" method="post" id ="myform"> <table> <tr> <td>姓名:</td> <td><input type ="text" id = "name" name ="name"&

jquery 实现表单验证功能代码(简洁)

1. 页面效果,自动提示验证信息... 2. 页面代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css

jquery表单验证插件(jquery.validate.js)的3种使用方式

jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

jQuery 表单验证插件formValidation实现个性化错误提示

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

jquery表单验证使用插件formValidator

1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

jValidate 基于jQuery的表单验证插件

网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: 复制代码 代码如下: <input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvme

Jquery插件easyUi表单验证提交(示例代码)

复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

jQuery插件Validation表单验证详解

本文为大家分享了jQuery插件Validation表单验证的具体实现代码,供大家参考,具体内容如下 功能 1.对"姓名"的必填和长度至少是两位的验证. 2.对"电子邮件"的必填和是否为E-mail格式的验证. 3.对"网址"是否为url的验证. 4.对"你的评论"是否必填验证. 结果图 例子 <html> <head> <meta http-equiv="Content-Type&qu

Vue快速实现通用表单验证的示例代码

本文开篇第一句话,想引用鲁迅先生<祝福>里的一句话,那便是:"我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单".这句话要从哪里说起呢?大概要从最近半个月的"全栈工程师"说起.项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载.博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM.其次,只有

jquery插件bootstrapValidator表单验证详解

Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali

JavaScript 使用正则表达式进行表单验证的示例代码

JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n

Vue from-validate 表单验证的示例代码

前言 需要进行表单数据验证,原先才用html5来完成验证,但是效果很差,也不够灵活,所以需要进行自定义的表单验证,网上的插件都太过庞大,项目并没有这么多的需求. 那让我们自己来写一个吧! 知识准备 vue的自定义指令 具体可以看官方手册,连接如下:https://vuejs.org/v2/guide/custom-directive.html 总的来说就是可以帮你在指定的钩子函数中跳用你的函数,参数(el,binding, vnode) el: 绑定的dom binding: 指令的各项属性 v

轻松学习jQuery插件EasyUI EasyUI表单验证

一.EasyUI创建异步提交表单 本文向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单(form)提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来. 创建表单(Form) <div style="padding:3px 2px;border-bottom:1px

jQuery.validate.js表单验证插件的使用代码详解

Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

layui插件表单验证提交触发提交的例子

废话不多说,大家直接看代码吧! <!------HTML部分---------> <form class="layui-form" action="{:url('login/login')}" method="post"> <div class="logi_content"> <p class="tit">管理系统</p> <div clas