插件使用一表单验证一validation
jquery-validation是一款前端经验js插件,可以验证必填字段、邮件、URL、数字范围等,在表单中应用非常广泛。
官方网站 https://jqueryvalidation.org/
源码网站 https://github.com/jquery-validation/jquery-validation
基本使用
第一步,引入jquery.js
1
|
|
第二步,引入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的更多相关文章
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- Spring表单验证(Spring Validation)
1.基本介绍 之前在项目中做的后台验证就是Spring Validation,最近闲下来了,就来整理一下. 从Spring3.0开始,Spring MVC中提供了对java校验的API支持.在Spri ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- Validation Engine 表单验证
前端开发仓库 » jQuery » jQuery Validation Engine 表单验证 jQuery Validation Engine 表单验证来源 功能强大的 jQuery 表单验证插件, ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(J ...
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
随机推荐
- 【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)] ...
- 20165325 2017-2018-2《Java程序设计》课程总结
20165325 2017-2018-2<Java程序设计>课程总结 一.每周作业链接汇总 1.预备作业一:我期待的师生关系 20165325 期望的师生关系 简要内容: 我心中的好老师 ...
- Shell-求平均
Compute the Average Given integers, compute their average correct to three decimal places. Input For ...
- dubbo源码分析14——DubboProtocol的export方法分析
走到了这一步也挺不容易的,把之前的暴露入口代码再列出来回顾一下: //配置为none不暴露 if (! Constants.SCOPE_NONE.toString().equalsIgnoreCase ...
- 2. Spring Boot项目启动原理初探
SpringBoot从宏观上说,就是对spring容器进行了一层包装.它内部的入口是利用 SpringApplication类的static的 run 方法进行启动的,调用的图: 上图中的这些方法都位 ...
- dubbo源码分析8——服务暴露概述
从上文中可知,com.alibaba.dubbo.config.spring.ServiceBean类是负责解析<dubbo:service/>的配置的,下面是它的类图 从类图上可知它继承 ...
- for循环查找元素怎么跳出for循环
应用场景: 当我们通过for循环来循环对象或者数组时,当找到符合条件的数据时,想要跳出这个循环,不在执行循环继续往后面查找. 解决方法: for循环里面使用return没有效果,于是,我们回到最初控制 ...
- Liunx之xl2TP的一键搭建
作者:邓聪聪 1 L2TP(Layer 2 Tunnel Protocol二层隧道协议l),上图说明了VPN的一些特点,出差员工或者外出员工通过拨特定号码的方式接入到企业内部网络; --------- ...
- 在VC中改变TAB顺序的方法
用VC来写MFC程序的时候,多数情况下,会发现TAB顺序和预期的顺序不一致,那么这时就有必要重新调整TAB顺序, 来适应我们所写的程序. 调整TAB顺序的方法有两种: 1.在当前的界面或对话框下按“C ...
- 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 ...