使用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. zTree 用法小例

    插件地址:链接:http://pan.baidu.com/s/1jHVtyZ0 密码:7kee <select id="getTree" resultType="j ...

  2. Fast I/O 模板

    [来源:2017 Multi-University Training Contest - Team 1] //面包有毒:P #define BUF_SIZE 100000 //fread -> ...

  3. luogu P1260 工程规划

    题目描述 造一幢大楼是一项艰巨的工程,它是由n个子任务构成的,给它们分别编号1,2,…,n(5≤n≤1000).由于对一些任务的起始条件有着严格的限制,所以每个任务的起始时间T1,T2,…,Tn并不是 ...

  4. Android Studio如何Format代码

    Android Studio如何Format代码 Reformat code Shift + CTRL + ALT + L (Win) OPTION + CMD + L (Mac)

  5. Matlab多项式拟合測试

    x=0:0.2:4; %生成等差数列 rnd=rand(1,size(x,2))*5; %生成一组随机数 y=x.*x.*x+x.*x+6+rnd; %生成y=x^3+x^2+6函数在垂直方向5个尺度 ...

  6. A002-开发工具介绍

    关于Android的开发工具有非常多,基本上都能够在SDK中找到.下面我们逐个来看一下: 首先我们使用的是Java语言进行Android应用的开发,那么Java的执行环境是少不了的了,我们须要在我们的 ...

  7. LeetCode_DP_Word Break II

    LeetCode_Word Break II 一.题目描写叙述: 二.解决思路: 题目要求我们要在原字符串中加空格,使得隔开的每一个词都是词典中的词. 所以我们大能够按顺序扫描每一个字符.可是然后当碰 ...

  8. JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  9. atitit.窗口静听esc退出本窗口java swing c# .net php

    atitit.窗口静听esc退出本窗口java swing c# .net php 1. 监听esc  按键 1 1.1. 监听一个组件 1 1.2. 监听加在form上 1 2. 关闭窗口 2 1. ...

  10. [PHP]PDO调用存储过程

    1. 数据库中已创建存储过程user_logon_check, PHP调用示例如下, <?php $dsn = 'mssql:dbname=MyDbName;host=localhost'; $ ...