使用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. gridview无数据源实现更新数据库（即断开更新数据库）

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  2. linux-起步

    学习网站: linux中国开源社区 Vmware下载与安装 https://blog.csdn.net/Ywaken/article/details/78839005 https://blog.csd ...

  3. 标准C程序设计七---13

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  4. Jsp中路径问题

    ${pageContext.request.contextPath}”的作用是取出部署的应用程序名,这样不管如何部署,所用路径都是正确的. <!--使用绝对路径的方式引入CSS文件-->& ...

  5. docker使用 命令

    Dockerfile FROM golang:alpine3. AS build-stage WORKDIR /go/src/mypro.exportReport COPY . . RUN go bu ...

  6. 531. Lonely Pixel I

    Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...

  7. kafka基础介绍

    kafka基础介绍 一.kafka介绍 1.1主要功能 根据官网的介绍,kafka是一个分布式流媒体的平台,它主要有三大功能: 1.11:It lets you publish and subscri ...

  8. MongoDB学习day10--数据库导入导出

    在 Mongodb 中我们使用 mongodump 命令来备份 MongoDB 数据. 该命令可以导出所有数据到指定目录中.mongodump 命令可以通过参数指定导出的数据量级转存的服务器. 使用m ...

  9. linux批量解压和批量压缩

    ls *.tar.gz | xargs -n1 tar xzvf //批量解压 ls | awk '{ print "tar zcvf "$0".tar.gz " ...

  10. CS 和 BS 的区别和优缺点（转）

    转自:http://www.cnblogs.com/scnuyz/p/5808808.html bs是浏览器(browser)和服务器(server) cs是静态客户端程序(client)和服务器(s ...