简单地使用jquery的validate

——@梁WP

摘要:本文通过一个很简单的例子,讲解了jquery validate的最基础使用方式。

一、源代码

  注意事项都写在代码的注释里了,哈哈。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lwp</title>

<!-- jquery,必须 -->
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<!-- jquery的校验,必须 -->
<script type="text/javascript" src="jquery.validate.js"></script>

<!-- 额外下载的校验规则大全,可选 -->
<script type="text/javascript" src="additional-methods.js"></script>

<script>
    $(function() {
        /* 让表单使用jquery-validate的校验,必须 */
        $("form").validate();

        /* 用中文覆盖jquery-validate原有的英文提示,可选 */
        jQuery.extend(jQuery.validator.messages, {
            required : "不能为空",
            email : "请输入正式的邮箱"
        });

        /* 自定义校验规则,可选 */
        jQuery.validator.addMethod("lwp", function(value, element) {
            if (value == "" || value == "liang") {
                return true;
            }
            else {
                return false;
            }
        }, "只能输入liang");
    });

    function check(){
        /* 检查表单 */
        if($("form").valid()) {
            alert("提交成功");
        }
        else {
            return false;
        }
    }
</script>

<style>
/* 自定义的错误提示样式,覆盖jquery-validate自带的错误提示样式,可选 */
label.error {
    color: #F00;
    font-size: 12px;
}
</style>
</head>

<body>
    <form>
        <div>
            <label for="email">邮箱</label>
            <!-- required和email是jquery-validate自带的校验规则 -->
            <input type="text" autocomplete="off" name="email" required="true" email="true">
        </div>

        <div>
            <label for="author">作者</label>
            <!-- lwp是自己定义的校验规则 -->
            <input type="text" autocomplete="off" name="author" required="true" lwp="true">
        </div>

        <div>
            <input type="button" onclick="check();" value="提交">
        </div>
    </form>
</body>

</html>

二、结果截图

  1、required的校验,截图如下:

    

  2、email和lwp的校验,截图如下:

    

  3、校验通过之后的提交,截图如下:

    

时间: 2024-10-07 19:42:37

简单地使用jquery的validate的相关文章

基于jQuery的Validate表单验证

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ

jquery插件-validate

1.引入js,css 下载地址:http://plugins.jquery.com/validate/ 2.设置验证规则:input的class添加以下属性 3.设置不符合规则的提示信息:添加data-msg-xxx(xxx为以下属性)               required: "必选字段",         remote: "请修正该字段",         email: "请输入正确格式的电子邮件",         url: &quo

jquery 之validate 笔记

默认分类 2010-04-04 20:35:01 阅读123 评论0 字号:大中小 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持.说明:需要JQuery版本:1.2.6+步骤:1, 要导入相应的jQuery.js与jquery.validate.js文件<script src="jquery.js" type="text/javascri

JQuery 【validate】缓存

[第一次] 与 [第二次] 检验值相同时,强制再次进行校验~ if($.data(document.getElementById("userName"), "previousValue")) { $.data(document.getElementById("userName"), "previousValue").old = null; } JQuery [validate]缓存

Android简单封装类似JQuery异步请求

在android开发中经常会使用异步请求数据,通常会使用handler或者AsyncTask去做,handler 配合message 使用起来比较麻烦,AsyncTask 线程池只允许128个线程工作,会有溢出的问题,(当然一般情况不会有那么多线程同时工作的)所以写了这个代码,还望高手指正! [Java]代码 01 package com.xbl.task; 02 03 import java.io.BufferedReader; 04 import java.io.InputStream; 0

jQuery的validate验证插件使用方法

(1)默认校验规则(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性(7)number:true 必须输入合法的数字(

html javascript 简单页面 追加jQuery

对自己这两天学习html javascript的一个简单的小运用.如上图所示,一个简答的小页面,并未实现页面连接功能,只是有页面布局和事件处理.对姓名.密码.邮箱的输入格式要求,括不能为空.格式正确.长度大于6位 主要记录下自己的思路和克服的问题: 思路:页面布局完后,javascript 对页面文本框事件处理. 一丶通过window.onload() = function() {}来作为主体,表示页面加载完后运行函数. 二丶通过document.getElementById获得dom对象. 三

jquery 插件 validate 学习

jquery是十分方便的对于现在来说. 首先应该明白一个问题: <p> <label  for="password">Password</label> <input id="password" name="password" maxlength="24"/> </p> 请问<input >的父元素是谁? 当然,如果看不出来,我们可以使用chrome浏览器一

一个简单的基于jQuery的焦点图(幻灯片)代码

本代码实现的是横向循环滚动, <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery的焦点图(幻灯片)</title> <sc