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. 数字图像处理- 3.4 空间滤波 and 3.5 平滑空间滤波器

    3.4 空间滤波基础 • Images are often corrupted by random variations in intensity, illumination, or have poo ...

  2. Ubuntu 15.10安装KVM

    1.查看cpu是否支持硬件虚拟化 egrep "svm|vmx" /proc/cpuinfo 2.安装KVM apt-get install qemu-kvm virt-manag ...

  3. 项目管理知识框架PMBOK（文字版）

    项目管理知识框架PMBOK   项目整体管理[I](Integration) 1. 制定项目章程(Develop Project Charter) 2. 制定项目初步范围说明书(Develop Pre ...

  4. 平衡二叉树（AVL）c语言实现

    参考: 二叉平衡树的插入和删除操作 平衡二叉树,AVL树之图解篇 [查找结构3]平衡二叉查找树 [AVL] #include "stdio.h" #include "st ...

  5. EF框架之三种模式

    使用EF之前必须要对EF有个宏观的了解.学习任何一种技术都要像门卫一样问几个问题. 第一,它是谁? 第二,从哪里来? 第三,到哪里去? 默念一遍:不谋全局者,不足谋一域. Entity Framewo ...

  6. MD5 (摘要加密)

    MD5 约定 同样的密码,同样的加密算法,每次加密的结果是不一样 密码方案 方案一:直接 MD5 pwd = pwd.md5String; 非常不安全 方案二 MD5 + 盐 pwd = [pwd s ...

  7. linux下如何使用sftp命令【转】

    linux下如何使用sftp命令 from:   http://www.cnblogs.com/chen1987lei/archive/2010/11/26/1888391.html sftp 是一个 ...

  8. 思维导图-javascript（转）

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...

  9. [整理]Android开发（二）-Weather App

    private class WeatherData{ private String _weatherDescription; private Integer _currentTemperature; ...

  10. 大熊君大话NodeJS之------Stream模块

    一,开篇分析 流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流是可读,可写或兼具两者的. 最早接触Stream是从早期的un ...