jquery-validation是一款前端经验js插件,可以验证必填字段、邮件、URL、数字范围等,在表单中应用非常广泛。

官方网站 https://jqueryvalidation.org/

源码网站 https://github.com/jquery-validation/jquery-validation


基本使用

第一步,引入jquery.js

第二步,引入js

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

第三步,在表单中添加属性required

	       <form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>请提供您的姓名,电子邮件地址(不发表)和评论</legend>
<p>
<label for="cname" style="margin-left:32px">名称 </label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">邮件地址 </label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl" style="margin-left:32px">网址 </label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">你的评论 </label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" style="margin-left:20%">
</p>
</fieldset>
</form>

  

在表单组件内添加属性required,表示这个组件是必填字段。

第四步,使验证生效。

1
2
3
$().ready(function() {
    $("#commentForm").validate();
});

默认校验规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
required:true              必输字段
remote:"check.php"         使用ajax方法调用check.php验证输入值
email:true                 必须输入正确格式的电子邮件
url:true                   必须输入正确格式的网址
date:true                  必须输入正确格式的日期
dateISO:true               必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number:true                必须输入合法的数字(负数,小数)
digits:true                必须输入整数
creditcard:                必须输入合法的信用卡号
equalTo:"#field"           输入值必须和#field相同,用于比较密码相同否
accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
minlength:10               输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]               输入值必须介于 5 和 10 之间
max:5                      输入值不能大于5
min:10                     输入值不能小于10

自定义消息提示

第一步和第二步同上面的基本使用一样。

第三步,表单DOM

<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>完整验证表单</legend>
<p>
<label for="firstname" style="margin-left:32px">名称</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname" style="margin-left:32px">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username" style="margin-left:16px">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password" style="margin-left:32px">密码</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">重复密码</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">邮件地址</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">请同意我们的协议</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我想收到时事通讯。</label>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
</p>
<fieldset id="newsletter_topics">
<legend>请选择两项</legend>
<label for="topic_marketflash">
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">选项1
</label>
<label for="topic_fuzz">
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">选项2
</label>
<label for="topic_digester">
<input type="checkbox" id="topic_digester" value="digester" name="topic">选项3
</label>
<br>
<label for="topic" class="error">请选择至少两个您想接收的主题。</label>
</fieldset>
<p>
<input class="submit" type="submit" value="提交" style="margin-left:20%">
</p>
</fieldset>
</form>

  

第四步,自定义验证消息

$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password" //两次密码比较
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: { // 消息可以自定义
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必须由至少2个字符组成"
},
password: {
required: "请输入密码",
minlength: "您的密码必须至少有5个字符长。"
},
confirm_password: {
required: "请输入密码",
minlength: "您的密码必须至少有5个字符长。",
equalTo: "请再次输入密码"
},
email: "请输入有效的电子邮件地址",
agree: "请接受我们的政策",
topic: "请选择至少2个主题"
}
});

  


按钮点击时验证

使用mvc模式下会采用上面的验证方法,但在ajax提交请求时,表单按钮类型是button不是submit。这时便是按钮点击验证,不是表单提交验证。

1
2
3
4
<form id="buttonForm">
 <input type="text" name="userName" id="userName"/>
 <button type="button" id="btn-query" onclick="save()">提交</button>
</form>

表单提交的按钮类型不是submit,而是button。正常情况不会执行$("#buttonForm").validate({})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#buttonForm").validate({
    rules: {
        userName: {
            required: true,
            minlength: 2,
            
        }
    },
    messages: {
        username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个字母组成"
        }
    }
});

要执行$("#buttonForm").validate({}),必须在按钮关联的save()方法里调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//提交方法
function save() {
    // 调用验证,返回验证结果。验证结果是boolean值,验证成功为true,否则为false;
    var flag = $("#buttonForm").valid();
    if(!flag){
        //没有通过验证,退出当前函数,后面的ajax保存不执行
        return;
    }
 
    var data = $("#buttonForm").serializeArray();
    $.ajax({
      url: "save.do",
      data: data,
      success: function(data){
         
      }
    });
}

插件使用一表单验证一validation的更多相关文章

  1. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  2. Spring表单验证(Spring Validation)

    1.基本介绍 之前在项目中做的后台验证就是Spring Validation,最近闲下来了,就来整理一下. 从Spring3.0开始,Spring MVC中提供了对java校验的API支持.在Spri ...

  3. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

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

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

  5. Validation Engine 表单验证

    前端开发仓库 » jQuery » jQuery Validation Engine 表单验证 jQuery Validation Engine 表单验证来源 功能强大的 jQuery 表单验证插件, ...

  6. jQuery formValidator表单验证插件

    什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...

  7. (转)强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...

  8. 强大的JQuery表单验证插件 FormValidator使用介绍

    jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...

  9. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

随机推荐

  1. 【Math for ML】向量微积分(Vector Calculus)

    I. 向量梯度 假设有一个映射函数为\(f:R^n→R^m\)和一个向量\(x=[x_1,...,x_n]^T∈R^n\),那么对应的函数值的向量为\(f(x)=[f_1(x),...,f_m(x)] ...

  2. 20165325 2017-2018-2《Java程序设计》课程总结

    20165325 2017-2018-2<Java程序设计>课程总结 一.每周作业链接汇总 1.预备作业一:我期待的师生关系 20165325 期望的师生关系 简要内容: 我心中的好老师 ...

  3. Shell-求平均

    Compute the Average Given integers, compute their average correct to three decimal places. Input For ...

  4. dubbo源码分析14——DubboProtocol的export方法分析

    走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...

  5. 2. Spring Boot项目启动原理初探

    SpringBoot从宏观上说,就是对spring容器进行了一层包装.它内部的入口是利用 SpringApplication类的static的 run 方法进行启动的,调用的图: 上图中的这些方法都位 ...

  6. dubbo源码分析8——服务暴露概述

    从上文中可知,com.alibaba.dubbo.config.spring.ServiceBean类是负责解析<dubbo:service/>的配置的,下面是它的类图 从类图上可知它继承 ...

  7. for循环查找元素怎么跳出for循环

    应用场景: 当我们通过for循环来循环对象或者数组时,当找到符合条件的数据时,想要跳出这个循环,不在执行循环继续往后面查找. 解决方法: for循环里面使用return没有效果,于是,我们回到最初控制 ...

  8. Liunx之xl2TP的一键搭建

    作者:邓聪聪 1 L2TP(Layer 2 Tunnel Protocol二层隧道协议l),上图说明了VPN的一些特点,出差员工或者外出员工通过拨特定号码的方式接入到企业内部网络; --------- ...

  9. 在VC中改变TAB顺序的方法

    用VC来写MFC程序的时候,多数情况下,会发现TAB顺序和预期的顺序不一致,那么这时就有必要重新调整TAB顺序, 来适应我们所写的程序. 调整TAB顺序的方法有两种: 1.在当前的界面或对话框下按“C ...

  10. Codeforces 1091E New Year and the Acquaintance Estimation Erdős–Gallai定理

    题目链接:E - New Year and the Acquaintance Estimation 题解参考: Havel–Hakimi algorithm 和 Erdős–Gallai theore ...