.代码中添加引用（必备引用）

  1.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库-->
  2.     <script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必须库-->
  3.     <script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩展库-->
  4.     <link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表单验证样式表-->

3.<body>中要验证的标签（做一些常用的演示）

  1. <table border="0px" style="font-size:12px">
  2.   <tr>
  3.       <td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>
  4.     </tr>
  5.     <tr>
  6.       <td align="right">身份证(正则表达式库):</td>
  7.       <td><input name="sfz" type="text" id="sfz" /></td>
  8.       <td><div id="sfzTip" style="width:300px"></div></td>  <!--必须注意这里提示验证信息中的div的id值，跟要验证控件中的id值多了一个Tip，下面的都是这样。必须多的是Tip，也必须要多。-->
  9.     </tr>
  10.     <tr>
  11.       <td align="right">身份证(外部函数):</td>
  12.       <td><input type="text" id="sfz1" style="width:120px" /></td>
  13.       <td><div id="sfz1Tip" style="width:300px"></div></td>
  14.     </tr>
  15.     <tr>
  16.       <td align="right">整数:</td>
  17.       <td><input type="text" id="zs" style="width:120px" /></td>
  18.       <td><div id="zsTip" style="width:300px"></div></td>
  19.     </tr>
  20.     <tr>
  21.       <td align="right">正整数:</td>
  22.       <td><input type="text" id="zzs" style="width:120px" /></td>
  23.       <td><div id="zzsTip" style="width:300px"></div></td>
  24.     </tr>
  25.     <tr>
  26.       <td align="right">负整数:</td>
  27.       <td><input type="text" id="fzs" style="width:120px" /></td>
  28.       <td><div id="fzsTip" style="width:300px"></div></td>
  29.     </tr>
  30.     <tr>
  31.       <td align="right">数字:</td>
  32.       <td><input type="text" id="sz" style="width:120px" /></td>
  33.       <td><div id="szTip" style="width:300px"></div></td>
  34.     </tr>
  35.     <tr>
  36.       <td align="right">正数（正整数 + 0）:</td>
  37.       <td><input type="text" id="zs1" style="width:120px" /></td>
  38.       <td><div id="zs1Tip" style="width:300px"></div></td>
  39.     </tr>
  40.     <tr>
  41.       <td align="right">负数（负整数 + 0）:</td>
  42.       <td><input type="text" id="fs" style="width:120px" /></td>
  43.       <td><div id="fsTip" style="width:300px"></div></td>
  44.     </tr>
  45.     <tr>
  46.       <td align="right">浮点数:</td>
  47.       <td><input type="text" id="fds" style="width:120px" /></td>
  48.       <td><div id="fdsTip" style="width:300px"></div></td>
  49.     </tr>
  50.     <tr>
  51.       <td align="right">正浮点数:</td>
  52.       <td><input type="text" id="zfds" style="width:120px" /></td>
  53.       <td><div id="zfdsTip" style="width:300px"></div></td>
  54.     </tr>
  55.     <tr>
  56.       <td align="right">负浮点数:</td>
  57.       <td><input type="text" id="ffds" style="width:120px" /></td>
  58.       <td><div id="ffdsTip" style="width:300px"></div></td>
  59.     </tr>
  60.     <tr>
  61.       <td align="right">非负浮点数（正浮点数 + 0）:</td>
  62.       <td><input type="text" id="fffds" style="width:120px" /></td>
  63.       <td><div id="fffdsTip" style="width:300px"></div></td>
  64.     </tr>
  65.     <tr>
  66.       <td align="right">非正浮点数（负浮点数 + 0）:</td>
  67.       <td><input type="text" id="fzfds" style="width:120px" /></td>
  68.       <td><div id="fzfdsTip" style="width:300px"></div></td>
  69.     </tr>
  70.     <tr>
  71.       <td align="right">颜色:</td>
  72.       <td><input type="text" id="ys" style="width:120px" /></td>
  73.       <td><div id="ysTip" style="width:300px"></div></td>
  74.     </tr>
  75.     <tr>
  76.       <td align="right">你的EMAIL:</td>
  77.       <td><input type="text" id="email" style="width:120px" /></td>
  78.       <td><div id="emailTip" style="width:300px"></div></td>
  79.     </tr>
  80.     <tr>
  81.       <td align="right">手机:</td>
  82.       <td><input type="text" id="sj" style="width:120px" /></td>
  83.       <td><div id="sjTip" style="width:300px"></div></td>
  84.     </tr>
  85.     <tr>
  86.       <td align="right">邮编:</td>
  87.       <td><input type="text" id="yb" style="width:120px" /></td>
  88.       <td><div id="ybTip" style="width:300px"></div></td>
  89.     </tr>
  90.     <tr>
  91.       <td align="right">非空:</td>
  92.       <td><input type="text" id="fk" style="width:120px" /></td>
  93.       <td><div id="fkTip" style="width:300px"></div></td>
  94.     </tr>
  95.     <tr>
  96.       <td align="right">图片:</td>
  97.       <td><input type="text" id="tp" style="width:120px" /></td>
  98.       <td><div id="tpTip" style="width:300px"></div></td>
  99.     </tr>
  100.     <tr>
  101.       <td align="right">压缩文件:</td>
  102.       <td><input type="text" id="rar" style="width:120px" /></td>
  103.       <td><div id="rarTip" style="width:300px"></div></td>
  104.     </tr>
  105.     <tr>
  106.       <td align="right">ip4:</td>
  107.       <td><input type="text" id="ip4" style="width:120px" /></td>
  108.       <td><div id="ip4Tip" style="width:300px"></div></td>
  109.     </tr>
  110.     <tr>
  111.       <td align="right">QQ号码:</td>
  112.       <td><input type="text" id="qq" style="width:120px" /></td>
  113.       <td><div id="qqTip" style="width:300px"></div></td>
  114.     </tr>
  115.     <tr>
  116.       <td align="right">国内电话:</td>
  117.       <td><input type="text" id="dh" style="width:120px" /></td>
  118.       <td><div id="dhTip" style="width:300px"></div></td>
  119.     </tr>
  120.     <tr>
  121.       <td align="right">用户名:</td>
  122.       <td><input type="text" id="yhm" style="width:120px" /></td>
  123.       <td><div id="yhmTip" style="width:300px"></div></td>
  124.     </tr>
  125.     <tr>
  126.       <td align="right">字母:</td>
  127.       <td><input type="text" id="zm" style="width:120px" /></td>
  128.       <td><div id="zmTip" style="width:300px"></div></td>
  129.     </tr>
  130.     <tr>
  131.       <td align="right">大写字母:</td>
  132.       <td><input type="text" id="dxzm" style="width:120px" /></td>
  133.       <td><div id="dxzmTip" style="width:300px"></div></td>
  134.     </tr>
  135.     <tr>
  136.       <td align="right">小写字母:</td>
  137.       <td><input type="text" id="xxzm" style="width:120px" /></td>
  138.       <td><div id="xxzmTip" style="width:300px"></div></td>
  139.     </tr>
  140.     <tr>
  141.       <td align="right">身份证:</td>
  142.       <td><input type="text" id="sfz" style="width:120px" /></td>
  143.       <td><div id="sfzTip" style="width:300px"></div></td>
  144.     </tr>
  145.   </table>

Jquery表单验证的更多相关文章

  1. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  2. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  3. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  4. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  5. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  6. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  7. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  8. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  9. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  10. jQuery表单验证案例

    目标:使用jQuery进行表单验证. 功能:1.必填选项后面添加了红色小星星: 2.选中开始输入时,输入文本框会改变当前背景色,增强用户体验: 3.输入的时候就开始验证,当输入格式正确就会提醒,就是当 ...

随机推荐

  1. Thinkphp查询 1.查询方式 2.表达式查询 3.快捷查询 4.区间查询 5.组合查询 6.统计查询 7.动态查询 8.SQL 查询

    1.使用字符串作为条件查询 $user = M('User'); var_dump($user->where('id=1 AND user="蜡笔小新"')->sele ...

  2. SQL update join on 连接更新

    http:/how-can-i-do-an-update-statement-with-join-in-sql create table sale ( id int, udid int, assid ...

  3. Apple Reject

    2016年11月10日 上午1:15 发件人 Apple 2. 1 PERFORMANCE: APP COMPLETENESS Thank you for your resubmission. Per ...

  4. JMeter学习-023-JMeter 命令行（非GUI）模式详解（一）-执行、输出结果及日志、简单分布执行脚本

    前文 讲述了JMeter分布式运行脚本,以更好的达到预设的性能测试(并发)场景.同时,在前文的第一章节中也提到了 JMeter 命令行(非GUI)模式,那么此文就继续前文,针对 JMeter 的命令行 ...

  5. LeetCode Minimum Moves to Equal Array Elements

    原题链接在这里:https://leetcode.com/problems/minimum-moves-to-equal-array-elements/ 题目: Given a non-empty i ...

  6. mac brew 安装php扩展报错：parent directory is world writable but not sticky

    $ brew install php70-mcrypt 报错: Error: parent directory is world writable but not sticky 搜索到github的答 ...

  7. My97DatePicker日期插件

    My97DatePicker是一款优秀的日期插件,它可以很方便地实现各种日期选择效果,博得广大IT开发人员的青睐. 下面来讲讲它的常用功能及设置方法. 方法/步骤   先来最简单的配置方法: (1)下 ...

  8. linux学习第一天

    linux touch 文件名mkdir -P 路径文件 cat 打开文件 vihostname 主机名ln 复制 ln -s 快捷方式cp 复制-r复制整个目录-p保持源文件属性不变-f强制复制mv ...

  9. php 设计模式

    一.工厂模式 1.创建接口类,规范方法,要实现这个接口的类必须实现这个接口的所有方法,接口的方法默认是抽象的,所以不再方法前面加 abstract interface people{ public f ...

  10. Docker相关文档

    网上找到的一个入门级Docker学习笔记,写的不错,值得一看. 转自:http://www.open-open.com/lib/view/open1423703640748.html#articleH ...