jquery.validate.js插件应用举例，ajax方式提交数据。

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery.valisdate.js学习</title>

<style type="text/css">

    table,td{border:0}

    .error,.myerror{ color:#933;}

</style>

</head>

<body>

<form id="commentForm" >

    <table>

      <tr>

        <td><label for="username">账号（必填，至少2个字符）</label></td>

        <td>

            <input id="username" name="username" type="text" />

        </td>

      </tr>

      <tr>

        <td>E-Mail（必填）</td>

        <td>

            <input id="email" type="email" name="email" />

        </td>

      </tr>

      <tr>

        <td colspan="2"><input class="submit" type="submit" value="Submit"/></td>

      </tr>

    </table>

</form>

<script src="jquery-1.11.1.js"></script>

<script src="jquery.validate.min.js"></script>

<script>

$("#commentForm").validate({

    rules:{

        username:{

            required:true

            },

        email:{

            required:true,

            email:true

            }

        },

    messages:{

        username:"请输入用户名",

        email:{

            required:"请输入邮箱",

            email:"邮箱格式错误"

            }

        },

    // ajax方式提交

    submitHandler: function(form)

    {

        $.ajax({

            type:"post",

            url:"check.php",

            data:{

                username:$("#username").val(),

                email:$("#email").val(),

            },

            success:function(data){

                if(data == 'true'){

                    alert('注册成功！');

                }else{

                    alert('用户名已经被占用！');

                }

            }

        });

    }

});

// 这段代码可以封装到单独的js文件中，然后引入即可

jQuery.extend(jQuery.validator.messages, {

    required: "必选字段",

    remote: "请修正该字段",

    email: "请输入正确格式的电子邮件",

    url: "请输入合法的网址",

    date: "请输入合法的日期",

    dateISO: "请输入合法的日期 (ISO).",

    number: "请输入合法的数字",

    digits: "只能输入整数",

    creditcard: "请输入合法的信用卡号",

    equalTo: "请再次输入相同的值",

    accept: "请输入拥有合法后缀名的字符串",

    maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),

    minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),

    rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),

    range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),

    max: jQuery.validator.format("请输入一个最大为{0} 的值"),

    min: jQuery.validator.format("请输入一个最小为{0} 的值")

});

</script>

</body>

</html>

php处理程序代码：

<?php

$username = $_POST['username'];

$email = $_POST['email'];

if($username == 'user001')

{

    echo 'false';

}

else

{

    echo 'true';

}

当用户名输入user001时，会提示用户名已经被占用。

表单验证神器——jquery.validate插件的更多相关文章

  1. 表单验证之JQuery Validate控件

    概述 jQuery Validation Plugin v1.14.0,基于JQuery,官网http://jqueryvalidation.org/ 该插件捆绑了一套有用的验证方法,包括 URL 和 ...

  2. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

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

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

  4. JS组件系列——Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. 黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  6. Form表单验证神器： BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. BootstrapValidator：表单验证神器

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. Bootstrap之Form表单验证神器： BootstrapValidator（转）

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  9. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

随机推荐

  1. C#操作XML，如何获取指定节点值？

    博客园提问,结合网友回答http://q.cnblogs.com/q/36082/   打开是treelist树形显示xml所有节点,递归来实现 xmlDoc = new XmlDocument(); ...

  2. Java web 使用页面压缩

    借助类,相关依赖: <!-- https://mvnrepository.com/artifact/net.sourceforge.pjl-comp-filter/pjl-comp-filter ...

  3. 安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.android.support.design.widget.Ta ...

  4. Ankh不起作用的解决方法

    请检查Visual Studio 2008的Tool > Options... > Source Control,在下拉菜单中选择插件.

  5. WebAPI文件上传与下载

    http://www.cnblogs.com/GarsonZhang/p/5511427.html https://github.com/GarsonZhang/FileUpLoadAPI

  6. localdb下载地址

    https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=29062 只能使用IE下载 http://www.microsoft.co ...

  7. JBoss7 安装配置

    一.下载安装 1.下载地址: http://www.jboss.org/jbossas/downloads ,下载Certified Java EE 6 Full Profile版本. 2.解压 jb ...

  8. [CentOS7]安装mysql遇到的问题

    摘要 在安装mysql的时候,遇到了一些问题,这里列出所遇到的问题. yum list mysql-server 在使用命令yum list mysql-server安装mysql的时候,遇到如图所示 ...

  9. cad中关于点样式点的绘制

    点样式 从0开始, 默认的就是0 0= 一个小点; 1= 空的, 什么都不显示; 2= +加号; 3= X 叉号 设置点样式的命令是: pdmode: 可以假设认为是: point default m ...

  10. NIOS ii 流水灯

    为了做项目的前期验证工作,实验室购买了某开发板,下面是基于该板子的实现过程.作为笔记记录,供入门者参考. 1:创建一个Quartus II的工程 next选择器件,然后finish.我的器件是cycl ...