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. Java自定义异常类

    用户可以根据自己的需要定义自己的异常类,定义异常类只需要继承Exception类即可 //================================================= // Fi ...

  2. Xcode如何编译Debug版和Release版

    在Run和Stop按钮的右边有一个工程名 点击工程名,选择Manage Schemes 选择Edit... 左侧选择Run ProjectName.app 右侧选择Info页,在Build Confi ...

  3. SCP 命令(转)

    \ svn 删除所有的 .svn文件 find . -name .svn -type d -exec rm -fr {} \; linux之cp/scp命令+scp命令详解   名称:cp 使用权限: ...

  4. js日期格式化函数

    /** * @author ocq * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).12小时(h).24小时(H).分(m).秒(s).周(E).季度(q ...

  5. [bug] 未能加载文件或程序集“SIPEPS, Version=6.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”或它的某一个依赖项。系统找不到指定的文件。

    摘要 在弄ucma的web项目中总会出现这个问题.尝试了很多方法,最后这样解决了. 解决方案 使web以64位的方式运行.

  6. 解决DWZ(JUI)的panel 点击关闭或者打开按钮 自己写的标签消失

    问题描述:DWZ的panel面板比较常用,我们常常需要在其标题栏上再增加一个些按钮,如下图问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了而且面板收缩的click事件,也跟新增的按钮绑定了, ...

  7. 配置 nginx server 出现nginx: [emerg] "root" directive is duplicate in /etc/nginx/server/blogs.conf:7

    在配置nginx 虚拟机时,执行 sudo /usr/sbin/nginx -t 报下面的错误: nginx: [emerg] nginx: configuration file /etc/nginx ...

  8. assign与weak区别(面试)

    weak 比 assign 多了一个功能就是当属性所指向的对象消失的时候(也就是内存引用计数为0)会自动赋值为 nil ,这样再向 weak 修饰的属性发送消息就不会导致野指针操作crash. 可能不 ...

  9. 文件操作 fopen() fclose()

    #define _CRT_SECURE_NO_DEPRECATE /*取消scanf,printf不安全之类的错误提示*/ /* fopen example */ #include <stdio ...

  10. [AngularJS] 入门

    什么是AngularJS AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足, 其通过使用指令(directives)结构来扩展HTML词汇 ...