validate表单验证-单独验证
今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况。然后我就了解了一下jquery validate的验证方法。
jquery validate表单验证方式有三个:
1、直接通过submit方式提交,提交时自动验证(常用的方法,不懂得可以查看 菜鸟教程-validate使用)
2、如果不是submit提交,比如在jquery中的某个事件中,调用提交表单事件的情况,在此时,1中的情况就不适用了(可能出现表单不验证的方法),这也是我遇到的问题
这就需要自己先编写一个表单验证程序,验证通过后,再提交表单。
//编写的表单验证程序
function validateForm() {
return $("#cashForm").validate({
rules: {
name: {
required: true
},
phone: {
required: true,
pattern: /^0?(13[0-9]|15[012356789]|18[012346789]|14[57]|17[678]|170[059]|14[57]|166|19[89])[0-9]{8}$/
},
carId: {
required: true,
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
},
number: {
required: true,
remote: {
url: "${base}/business/cash/check_card",
cache: false
}
}
},
messages: {
phone: {
pattern: "${message("common.validate.pattern")}"
},
number: {
remote: "${message("common.validate.pattern")}"
}
}
}).form();
}
提交表单事件:(以下函数是验证码验证通过后,触发的表单验证,红色加粗部分,大家写的时候可以直接用此部分)
$(document).ready(function(){
var $cashForm = $("#cashForm");
//获取验证码按钮绑定点击事件
$(".verIfi-btn").on("click",verification);
$("#sms_check").click(function () {
var smsCaptcha = $("input[name='smsCaptcha']").val();
var smsCaptchaId = $("input[name='smsCaptchaId']").val();
$.ajax({
url: "${base}/business/cash/sms_check",
type: "GET",
data:{
smsCaptchaId: smsCaptchaId,
smsCaptcha: smsCaptcha
},
dataType: "json",
cache: false,
success: function(message) {
if (message.check){
if(validateForm()){
$cashForm.submit();
}
}
}
});
});
});
3、验证一个单独的表单元素(校验规则写在空间中的时候使用)
例如:
<textarea id="ccomment" name="comment" maxlength="200" required></textarea>
验证方法:
function validateForm() {
$("#commentForm").validate().element($("#ccomment"));
}
function doSubmit(){
//do other things
//验证通过后提交
if(validateForm()){
$("#commentForm").submit()
}
}
参考:http://layznet.iteye.com/blog/1168811
validate表单验证-单独验证的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成
目录 1.案例 1.1图片上传 1.2进行图片木马检测 1.3缩略图生成 1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...
随机推荐
- Hibernate笔记一
背景 jdbc的优缺点 A:直接操作底层,提供了简单,便捷的访问数据库方法,跨平台比较强,灵活,可以写很多赋值的SQL语句:是最底层的数据库操作,所以效率比较高,Sql语句可以自己选择写,采用效率最高 ...
- Codeforces #617 (Div. 3)B. Food Buying
Mishka wants to buy some food in the nearby shop. Initially, he has ss burles on his card. Mishka ca ...
- SpringMvc 视图解析器常见功能、类型转换、格式化
springmvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...
- C++面试常见问题——04链表的逆序与合并
链表的逆序与合并 链表的逆序 已知一个链表的头指针为head,将该链表逆序. #include<iostream> using namespace std; struct Node{ in ...
- Simple English
Simple English 1. Basic English 1.1 设计原则: 1.2 基本英语单词列表850个 1.3 规则: 1.4 质疑 1.5 维基百科:基本英语组合词表 1.6 简单英文 ...
- 粘性session和非粘性session
粘性session就是指,apache服务器会把某个用户的请求,交给tomcat集群中的一个节点,以后此节点就负责该保存该用户的session,如果此节点挂掉,那么该用户的sessi ...
- MySQL的默认隔离级别的实现依赖于MVCC和锁,准确点说就是一致性读和锁。
MySQL的默认隔离级别的实现依赖于MVCC和锁,准确点说就是一致性读和锁.
- 「CH6901」骑士放置
「CH6901」骑士放置 传送门 将棋盘黑白染色,发现"日"字的两个顶点刚好一黑一白,构成一张二分图. 那么我们将黑点向源点连边,白点向汇点连边,不能同时选的一对黑.白点连边. 当 ...
- Centos7 安装编译nginx-1.9.6过程
一.安装环境准备 使用编译安装nginx最好都先安装下这些依赖包 安装nginx需要的依赖库 yum install -y gcc patch libffi-devel python-devel zl ...
- Centos7精简版安装常用扩展插件
一.安装ifconfig *确认本机是否真实存在ifconfig* echo $PATH 查看环境变量路径 ls /usr/sbin/ 查看此路径下是否有ifconfig这个程序 find / -na ...