使用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. 创建微服务项目后，在谷歌、Safari等浏览器下无法访问的具体原因

    使用SpringBoot开发了一个项目,端口随机给指定了一个,如6666. 可是奇葩的现象出现了,当在谷歌浏览器地址栏中输入localhost:6666访问的时候,提示无法访问. 检查良久,发现代码也 ...

  2. Bayan 2015 Contest Warm Up D. CGCDSSQ （math，pair，map，暴力）

    哎,只能转题解了,,, 8165031                 2014-10-10 15:53:42     njczy2010     D - CGCDSSQ             GN ...

  3. android调用邮件应用发送email

    直接贴代码: Intent intent = new Intent(android.content.Intent.ACTION_SEND); // 附件 File file = new File(En ...

  4. saltstack 开发相关命令记录

    SALT API开发相关命令记录. 查看当前的salt key信息salt-key -L 测试被控主机的连通性salt '*' test.ping 远程命令执行测试salt '*' cmd.run ' ...

  5. BZOJ——1607: [Usaco2008 Dec]Patting Heads 轻拍牛头

    http://www.lydsy.com/JudgeOnline/problem.php?id=1607 Time Limit: 3 Sec  Memory Limit: 64 MBSubmit: 2 ...

  6. 洛谷P1061 Jam的计数法

    题目描述 Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用相同个数的字母),英文字 ...

  7. Maven的相关问题（一）——settings.xml配置详解

    工作中第一次正式接触maven,虽然之前在学习时有遇到过,但是对于maven的认识和理解确实太浅薄,仅仅局限于机械式的操,纸上得来终觉浅,绝知此事要躬行···古人诚不欺我也~ 下面先贴一个找到的一个非 ...

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

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

  9. IIS Express 的怪毛病 vs2013本机调试

    本机调试时,如果同一个项目有多个版本,同时debug,可能会串项目调试,造成不必要的困扰: 通常情况下是 IIS express的映射出现了问题: 解决方案: 1.打开目录:查看文件C:\Users\ ...

  10. install Python 2.7 and Python 3.3 on CentOS 6

    来自:http://toomuchdata.com/2014/02/16/how-to-install-python-on-centos/ In this guide I will show you ...