1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>网站注册页面</title>
  6.         <style>
  7.             #contanier{
  8.                 border: 0px solid white;
  9.                 width: 1300px;
  10.                 margin: auto;
  11.             }
  13.             #top{
  14.                 border: 0px solid white;
  15.                 width: 100%;
  16.                 height: 50px;
  17.             }
  18.             #menu{
  19.                 border: 0px solid white;
  20.                 height: 40px;
  21.                 background-color: black;
  22.                 padding-top: 10px;
  23.                 margin-bottom: 15px;
  24.                 margin-top: 10px;
  25.             }
  26.             .top{
  27.                 border: 0px solid white;
  28.                 width: 405px;
  29.                 height: 100%;
  30.                 float: left;
  31.                 padding-left: 25px;
  32.             }
  33.             #top1{
  34.                 padding-top: 15px;
  35.             }
  36.             #bottom{
  37.                 margin-top: 13px;
  38.                 text-align: center;
  39.             }
  41.             #form{
  42.                 height: 500px;
  43.                 padding-top: 70px;
  44.                 background-image: url(../img/regist_bg.jpg);
  45.                 margin-bottom: 10px;
  46.             }
  47.             a{
  48.                 text-decoration: none;
  49.             }
  51.             label.error{
  52.                 background:url(../img/unchecked.gif) no-repeat 10px 3px;
  53.                 padding-left: 30px;
  54.                 font-family:georgia;
  55.                 font-size: 15px;
  56.                 font-style: normal;
  57.                 color: red;
  58.             }
  60.             label.success{
  61.                 background:url(../img/checked.gif) no-repeat 10px 3px;
  62.                 padding-left: 30px;
  63.             }
  65.             #father{
  66.                 border: 0px solid white;
  67.                 padding-left: 307px;
  68.             }
  70.             #form2{
  71.                 border: 5px solid gray;
  72.                 width: 660px;
  73.                 height: 450px;
  74.             }
  76.         </style>
  77.         <script type="text/javascript" src="../js/jquery-1.11.0.min.js" charset="UTF-8"></script>
  78.         <script type="text/javascript" src="../js/jquery.validate.min.js" charset="UTF-8"></script>
  79.         <script type="text/javascript" src="../js/messages_zh.js" charset="UTF-8"></script>
  80.         <script>
  81.             $(function() {
  82.                 $("#registForm").validate({
  83.                     rules:{
  84.                         user:{
  85.                             required:true,
  86.                             minlength:3
  87.                         },
  88.                         password:{
  89.                             required:true,
  90.                             digits: true,
  91.                             minlength:6
  92.                         },
  93.                         repassword:{
  94.                             required:true,
  95.                             equalTo: "[name='password']"
  96.                         },
  97.                         email:{
  98.                             required:true,
  99.                             email: true
  100.                         },
  101.                         username:{
  102.                             required:true,
  103.                             minlength:3,
  104.                             maxlength:5
  105.                         },
  106.                         sex: {
  107.                             required: true
  108.                         }
  109.                     },
  110.                     messages:{
  111.                         user:{
  112.                             required:"用户名不能为空!",
  113.                             minlength:"用户名不得少于3位!"
  114.                         },
  115.                         password:{
  116.                             required:"密码不能为空!",
  117.                             digits: "密码必须是数字",
  118.                             minlength:"密码不能少于6位"
  119.                         },
  120.                         repassword:{
  121.                             required:"确认密码不能为空!",
  122.                             equalTo: "两次输入密码不一致!"
  123.                         },
  124.                         email:{
  125.                             required:"邮箱不能为空",
  126.                             email: "邮箱格式不支持"
  127.                         },
  128.                         username:{
  129.                             required:"姓名不能为空!",
  130.                             minlength:"姓名不得少于3位!",
  131.                             maxlength:"姓名不超过5位!"
  132.                         },
  133.                         sex: {
  134.                             required: "性别必须勾选!"
  135.                         }
  136.                     },
  137.                     errorElement: "label",          //用来创建错误提示信息标签
  138.                     success: function(label) {      //验证成功后的执行的回调函数
  139.                         //label指向上面那个错误提示信息
  140.                         label.text(" ")             //清空错误提示信息
  141.                              .addClass("success");  //加上自定义success类
  142.                     }
  143.                 });
  144.             });
  145.         </script>
  146.     </head>
  147.     <body>
  148.         <div id="contanier">
  149.             <div id="top">
  150.                 <div class="top">
  151.                     <img src="../img/logo2.png" height="47px"/>
  152.                 </div>
  153.                 <div class="top">
  154.                     <img src="../img/header.png" height="45px" />
  155.                 </div>
  156.                 <div class="top" id="top1">
  157.                     <a href="#">登录</a>
  158.                     <a href="#">注册</a>
  159.                     <a href="#">购物车</a>
  160.                 </div>
  161.             </div>
  162.             <div id="menu">
  163.                 <a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
  164.                 <a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
  165.                 <a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
  166.                 <a href="#"><font color="white">鞋靴箱包</font></a>
  167.             </div>
  168.             <div id="form">
  169.                 <form action="#" method="get" id="registForm">
  170.                     <div id="father">
  171.                         <div id="form2">
  172.                             <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
  173.                                 <tr>
  174.                                     <td colspan="2" >
  175.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  176.                                         <font size="5">会员注册</font>&nbsp;&nbsp;&nbsp;USER REGISTER
  177.                                     </td>
  178.                                 </tr>
  179.                                 <tr>
  180.                                     <td width="180px">
  181.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  182.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  183.                                         <label for="user" >用户名</label>
  184.                                     </td>
  185.                                     <td>
  186.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user"/>
  187.                                     </td>
  188.                                 </tr>
  189.                                 <tr>
  190.                                     <td>
  191.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  192.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  193.                                         密码
  194.                                     </td>
  195.                                     <td>
  196.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password"  name="password" size="35px" id="password" />
  197.                                     </td>
  198.                                 </tr>
  199.                                 <tr>
  200.                                     <td>
  201.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  202.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  203.                                         确认密码
  204.                                     </td>
  205.                                     <td>
  206.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px"/>
  207.                                     </td>
  208.                                 </tr>
  209.                                 <tr>
  210.                                     <td>
  211.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  212.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  213.                                         Email
  214.                                     </td>
  215.                                     <td>
  216.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email"/>
  217.                                     </td>
  218.                                 </tr>
  219.                                 <tr>
  220.                                     <td>
  221.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  222.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  223.                                         姓名
  224.                                     </td>
  225.                                     <td>
  226.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px"/>
  227.                                     </td>
  228.                                 </tr>
  229.                                 <tr>
  230.                                     <td>
  231.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  232.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  233.                                         性别
  234.                                     </td>
  235.                                     <td>
  236.                                         <span style="margin-right: 155px;">
  237.                                             <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男
  238.                                             <input type="radio" name="sex" value="女"/>女<em></em>
  239.                                         </span>
  240.                                         <label for="sex" class="error" style="display: none;"></label>
  241.                                     </td>
  242.                                 </tr>
  243.                                 <tr>
  244.                                     <td>
  245.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  246.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  247.                                         出生日期
  248.                                     </td>
  249.                                     <td>
  250.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday"  size="35px"/>
  251.                                     </td>
  252.                                 </tr>
  253.                                 <tr>
  254.                                     <td>
  255.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  256.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  257.                                         验证码
  258.                                     </td>
  259.                                     <td>
  260.                                         <em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" />
  261.                                         <img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
  262.                                     </td>
  263.                                 </tr>
  264.                                 <tr>
  265.                                     <td colspan="2">
  266.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  267.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  268.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  269.                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  270.                                         <input type="submit" value="注      册" height="50px"/>
  271.                                     </td>
  272.                                 </tr>
  273.                             </table>
  274.                         </div>
  275.                     </div>
  276.                 </form>
  277.             </div>
  278.         </div>
  279.     </body>
  280. </html>

JQuery之validate入门的更多相关文章

  1. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  2. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  3. 简单地使用jquery的validate

    简单地使用jquery的validate ——@梁WP 摘要:本文通过一个很简单的例子,讲解了jquery validate的最基础使用方式. 一.源代码 注意事项都写在代码的注释里了,哈哈. < ...

  4. jquery插件-validate

    1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下验证属性 3.设置不符合规则的提示信息:添加da ...

  5. 使用jquery插件validate制作的表单验证案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery validate入门

    <html> <head> <meta charset="utf8"></meta> </head> <body& ...

  7. jQuery校验validate详解（转）

    jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...

  8. jquery的validate.js 和 form.js 的使用方法

    在使用 Jquery 的方法的验证并且修改 原Form 表单的提交方式的时候,需要引用的文件有 <script type="text/javascript" src=&quo ...

  9. JQuery插件validate的Remote使用

    JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. 1. 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery ...

随机推荐

  1. uc浏览器的用户体验

    用户界面: 我认为,uc浏览器的用户界面还是很招人喜欢的,可以很容易让用户找到自己想看的网页.简单快捷. 记住用户的选择: uc在每次用户访问完网站之后都会记住用户访问的高频网站,以便下次用户可以更好 ...

  2. Python：print()函数的几个常用参数

    1.参数sep:设置输出字符产之间的字符串.默认是空格 name='Tomwenxing' age=' job='student' print(name,age,job) print(name,age ...

  3. 软工1816 · Alpha冲刺（8/10）

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员1(组长):王彬 过去两天完成了哪些任务 推进前后端各个接口的整合 学习jQuery基本语法,为beta阶段的商铺页面做准备 接下 ...

  4. HDU 5167 Fibonacci 筛法+乱搞

    题目链接: hdu: http://acm.hdu.edu.cn/showproblem.php?pid=5167 题意: 给你一个x,判断x能不能由斐波那契数列中的数相乘得到(一个数可以重复使用) ...

  5. 蜗牛慢慢爬 LeetCode 2. Add Two Numbers [Difficulty: Medium]

    题目 You are given two non-empty linked lists representing two non-negative integers. The digits are s ...

  6. React.js + LiveReload配置详解

    一.介绍一下LiveReload: LiveReload monitors changes in the file system. As soon as you save a file, it is ...

  7. session的基本原理

    转载:http://blog.sina.com.cn/s/blog_8155e74d0101iqmh.html 如何严格限制session在30分钟后过期! 1.设置客户端cookie的lifetim ...

  8. python 小数保留位数

    利用round(number[, ndigit] )函数四舍五入 保留浮点数的小数点. 如保留小数点后两位. num = 9.2174 new_num = round( num , 2 ) 则new_ ...

  9. 【前端学习笔记03】JavaScript对象相关方法及封装

    //Object.create()创建对象 var obj = Object.create({aa:1,bb:2,cc:'c'}); obj.dd = 4; console.log(obj.cc); ...

  10. C++四种类型转化

    2018-08-02 (星期四)C++类型转换:static_cast提供编译时期静态类型检测:    static_cast <type-id> (expression)    1)完成 ...