使用JQuery.Validate插件来校验页面表单有效性
​1. [代码] 常见的注册表单元素

<form action="#" method="post"  id="regist"> 
    <table cellpadding="0" cellspacing="0" border="0" class="form_table"> 
        <tr> 
            <td valign="middle" align="right">用户名:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">真实姓名:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">密码:</td> 
            <td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd"  id="pwd"/> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">重复密码:</td> 
            <td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">年龄:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">电话:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">电子邮件:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td> 
        </tr> 
        <tr> 
            <td valign="middle" align="right">验证码:</td> 
            <td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td> 
                </tr> 
    </table> 
    <p> <input type="submit" class="button" value="Submit &raquo;" />  <input type ="reset" class = "button"  value = "Reset &raquo;"> </p> 
 </form>
2. [代码]HTML头部引入需要的函数库

<head> 
    <title>欢迎注册</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
</head>http://www.huiyi8.com/flashjc/​
3. [代码]表单校验代码     
<script type="text/javascript"> 
        //表单填写情况校验 
        $(function(){ //代表页面加载以后执行 
            $("#regist").validate( //此处的#regist是JQuery的选择器，代表了校验id为regist的Form 
            { flash教程 
                rules: {//此处开始配置校验规则，下面会列出所有的校验规则 
                    username : "required", 
                    name : "required", 
                    pwd : {required:true,rangelength:[6,10]}, 
                    repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应 
                    age : {required:true,rangelength:[1,2]}, 
                    phone:{required:true,rangelength:[5,20]}, 
                    number:{required:true,}, 
                    email: {required:true,email: true,}, 
                }, 
                messages:{//自定义提示信息 
                    name:{required:"真实姓名不能为空!"}, 
                    pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"}, 
                    email:{required:"电子邮箱不能为空!"}, 
                } 
            } 
        ); 
        }); 
</script>
​

使用JQuery.Validate插件来校验页面表单有效性的更多相关文章

  1. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  2. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  3. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

  4. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  5. jQuery Validate插件实现表单强大的验证功能

    转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自 ...

  6. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  7. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  8. JavaScript学习——使用JS完成注册页面表单校验

    1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...

  9. 前端验证，jquery.validate插件

    jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...

随机推荐

  1. 垃圾收集器与内存分配策略 （深入理解JVM二）

    1.概述 垃圾收集(Garbage Collection,GC). 当需要排查各种内存溢出.内存泄露问题时,当垃圾收集成为系统达到更高并发量的瓶颈时,我们就需要对这些“自动化”的技术实施必要的监控和调 ...

  2. JVM GC 相关

    http://blog.csdn.net/cutesource/article/details/5904501 http://www.cnblogs.com/dingyingsi/p/3760447. ...

  3. 2014湘潭全国邀请赛I题 Intervals /POJ 3680 / 在限制次数下取有权区间使权最大/小问题（费用流）

    先说POJ3680:给n个有权(权<10w)开区间(n<200),(区间最多数到10w)保证数轴上所有数最多被覆盖k次的情况下要求总权最大,输出最大权. 思路:       限制的处理:s ...

  4. iOS App 项目：会员卡管理系统设计方案

    1.需求描写叙述 店主须要管理自己的会员信息和充值卡信息以及消费纪录 店主觉得购买电脑和外设成本太高,并且店面没有地方容纳这些设备 店主希望通过手机来完毕这些功能.但尽量不产生流量.对网络要求较低 店 ...

  5. 单点登录CAS-Demo

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 1安全证书配置 2部署服务端CAS-Server 3部署CAS-Client 4测试SSO   1,安全证书配置 CAS默认 ...

  6. BUPT复试专题—旋转图像(2014)

    题目描述 将一幅只含有01像素点的图片进行顺时针旋转,旋转的角度仅包含0°,90°,180°,270° 输入 第一行一个整数T(<50)表示输入的组数 每组测试数据第一行是两个整数N和M(< ...

  7. springcloud 学习笔记

    ---恢复内容开始--- 1. pom配置 1.1 引入spring boot 依赖 <parent> <groupId>org.springframework.boot< ...

  8. PS 图层后面有索引两字怎么办

    ps中图层后面有索引两字的怎么把它拖进别的图中?或怎么把索引去掉? 悬赏分:0 | 解决时间:2010-11-5 08:58 | 提问者:jk500pk 最佳答案 图像--模式 把索引颜色模式改成RG ...

  9. 二：redis 的hash类型相关操作

    =====================二种:hash类型================== 介绍:redis -> hash是一个string类型的field和value的映射表 hash ...

  10. LeetCode_3Sum

    一.题目 3Sum Total Accepted: 45112 Total Submissions: 267165My Submissions Given an array S of n intege ...